/* Main peach #FBBC9C */
/* Light peach #b19a8c */
/* Dark #342216 */
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes move-up {
  from {
    opacity: 0;
    transform: translateY(60px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

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

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

html {
  font-family: 'Catamaran', sans-serif;
  color: #342216;
  font-size: 12pt;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0; }

.link-button {
  background: #009688;
  border-radius: 8px;
  border: none;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  transition: all 0.1s ease;
  display: inline-block;
  box-shadow: 0px 1px 2px 0px rgba(127, 127, 127, 0.1);
  animation: slide-up 0.4s ease; }
  .link-button:visited {
    color: white; }
  .link-button:hover, .link-button:focus {
    transform: scale(1.025);
    box-shadow: 0px 1px 2px 0px rgba(127, 127, 127, 0.3); }

.link-button-alt {
  animation: slide-up 0.4s ease;
  color: #009688;
  padding: 12px 20px;
  text-decoration: underline;
  display: inline-block;
  font-weight: bold;
  transition: all 0.1s ease; }
  .link-button-alt:visited {
    color: #009688; }
  .link-button-alt:hover, .link-button-alt:focus {
    transform: scale(1.025); }

.cartoon {
  margin: 72px 16px 168px 16px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .cartoon .arrow-bt {
    background: url(/statics/arrow-bt.svg) no-repeat;
    width: 24px;
    height: 220px; }
  .cartoon .arrow-tb {
    background: url(/statics/arrow-tb.svg) no-repeat;
    width: 24px;
    height: 220px; }
  .cartoon .arrow-straight {
    background: url(/statics/arrow-straight.svg) no-repeat;
    width: 48px;
    height: 220px; }
  .cartoon .panel {
    margin: 4px 0;
    box-sizing: border-box;
    position: relative;
    width: 180px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(127, 127, 127, 0.1); }
  .cartoon .picture {
    height: 120px;
    width: 160px;
    position: relative; }
  .cartoon .circle {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    background: red;
    position: absolute; }
  .cartoon p {
    text-align: center; }
  .cartoon .panel-1 {
    text-align: center; }
    .cartoon .panel-1 img {
      margin-top: 12px; }
  .cartoon .panel-2 p {
    margin-bottom: 4px; }
  .cartoon .panel-2 img {
    position: absolute; }
  .cartoon .panel-2 img:nth-child(1) {
    left: 60px; }
  .cartoon .panel-2 img:nth-child(2) {
    left: 12px;
    top: 42px; }
  .cartoon .panel-2 img:nth-child(3) {
    left: 78px;
    top: 42px; }
  .cartoon .panel-3 p {
    margin-bottom: 4px; }
  .cartoon .panel-3 img {
    position: absolute; }
  .cartoon .panel-3 img:nth-child(1) {
    left: 6px;
    top: 22px; }
  .cartoon .panel-3 img:nth-child(2) {
    left: 84px;
    top: 32px; }
  .cartoon .panel-4 img {
    position: absolute; }
  .cartoon .panel-4 img:nth-child(1) {
    left: 34px; }
  .cartoon .panel-4 img:nth-child(2) {
    left: 84px; }
  .cartoon .panel-4 img:nth-child(3) {
    left: 8px;
    top: 40px; }
  .cartoon .panel-4 img:nth-child(4) {
    left: 92px;
    top: 40px; }
  .cartoon .panel-4 img:nth-child(5) {
    left: 50px;
    top: 40px; }
  .cartoon .panel-5 {
    text-align: center; }
    .cartoon .panel-5 img {
      margin-top: 16px; }

.three-up {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start; }
  .three-up p {
    font-size: 12pt; }
  .three-up .item {
    flex: 1;
    max-width: 240px;
    margin: 16px;
    display: flex;
    flex-direction: column;
    align-items: center; }
    .three-up .item img {
      width: 80px;
      height: 80px; }

.customers {
  text-align: center;
  margin-bottom: 128px;
  margin-top: 128px; }
  .customers h3 {
    font-weight: normal;
    color: #5e676e;
    font-size: 16pt; }
  .customers .customers-icons {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    padding: 8px;
    margin: 36px auto;
    align-items: center;
    justify-content: center; }
    .customers .customers-icons a {
      margin: 36px 16px;
      opacity: 0.5;
      transition: all 0.1s ease; }
      .customers .customers-icons a:hover {
        opacity: 1;
        transform: scale(1.025); }
      .customers .customers-icons a img {
        height: 80px; }

.explain-the-problem {
  margin: 64px auto;
  max-width: 960px;
  padding: 16px;
  text-align: center; }
  .explain-the-problem h2 {
    font-size: 32pt;
    text-align: center;
    line-height: 1.2;
    margin: 16px; }
  .explain-the-problem .explain-lead {
    font-size: 14pt;
    max-width: 720px;
    margin: 16px auto; }
  .explain-the-problem .three-up {
    align-items: stretch; }
  .explain-the-problem .item {
    box-shadow: 0px 1px 2px 0px rgba(127, 127, 127, 0.3);
    border: 1px solid rgba(127, 127, 127, 0.1);
    border-radius: 8px;
    padding: 16px 8px;
    min-width: 256px; }
    .explain-the-problem .item h3 {
      margin-bottom: 0; }
  .explain-the-problem .source {
    font-size: 11pt;
    color: #5e676e;
    margin-top: 24px; }
    .explain-the-problem .source a, .explain-the-problem .source a:visited {
      color: inherit; }

.key-benefits .lead {
  max-width: 600px;
  margin: 16px auto;
  font-size: 14pt;
  text-align: center; }

.key-benefits h2.primary {
  font-size: 32pt;
  text-align: center;
  line-height: 1.2;
  margin: 196px 16px 16px 16px; }

.key-benefits .benefit {
  display: flex;
  max-width: 760px;
  margin: 16px auto 96px auto;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center; }
  .key-benefits .benefit:nth-child(2), .key-benefits .benefit:nth-child(4), .key-benefits .benefit:nth-child(6) {
    flex-direction: row-reverse; }
  .key-benefits .benefit .benefit-text {
    box-sizing: border-box;
    padding: 32px;
    flex: 3; }
    .key-benefits .benefit .benefit-text h2 {
      font-size: 18pt;
      position: relative;
      margin-bottom: 0;
      line-height: 1.2; }
    .key-benefits .benefit .benefit-text p {
      margin-top: 16px;
      font-size: 12pt;
      color: #5d5c5c;
      max-width: 500px; }
  .key-benefits .benefit .benefit-image {
    flex: 1; }
    .key-benefits .benefit .benefit-image img {
      width: 100%; }

.we-are-unique {
  margin: 168px auto 108px auto;
  max-width: 1000px;
  padding: 16px;
  text-align: center; }
  .we-are-unique h2 {
    font-size: 32pt;
    text-align: center;
    line-height: 1.2;
    margin: 16px; }
  .we-are-unique .unique-lead {
    font-size: 14pt;
    max-width: 720px;
    margin: 16px auto; }
  .we-are-unique .three-up {
    margin-top: 84px; }
    .we-are-unique .three-up .item {
      text-align: left;
      max-width: unset;
      align-items: flex-start;
      min-width: 250px; }
    .we-are-unique .three-up img {
      width: auto;
      height: 140px;
      margin-bottom: 64px; }
    .we-are-unique .three-up h3 {
      margin: 0;
      font-size: 20pt; }
    .we-are-unique .three-up p {
      margin-bottom: 8px;
      margin-top: 0; }

.new-cta {
  max-width: 720px;
  margin: 128px auto 64px auto;
  border: 2px solid #f1f1f1;
  padding: 16px;
  border-radius: 8px; }
  .new-cta .new-cta-inner {
    max-width: 660px;
    margin: 16px auto;
    display: flex;
    align-items: center; }
  .new-cta .new-cta-image {
    width: 120px;
    margin-right: 32px; }
  .new-cta .new-label {
    display: inline-block;
    padding: 5px 10px;
    color: white;
    background: #03a87c;
    text-transform: uppercase;
    font-size: 9pt;
    font-weight: bold;
    margin-right: 12px;
    vertical-align: middle;
    border-radius: 2px; }
  .new-cta h3 {
    margin: 0; }
  .new-cta p {
    color: #5d5c5c; }
  .new-cta .new-cta-link {
    color: white;
    background: black;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px 10px 20px;
    margin: 0;
    font-weight: bold;
    border-radius: 4px;
    color: #636A71;
    background: #E9EEF3;
    font-size: 11pt; }
    .new-cta .new-cta-link i {
      display: inline-block;
      vertical-align: middle;
      margin-left: 24px;
      font-size: 9pt; }
    .new-cta .new-cta-link:visited {
      color: #636A71; }
    .new-cta .new-cta-link:hover, .new-cta .new-cta-link:focus {
      transform: scale(1.025); }

.demo {
  margin: 196px auto;
  max-width: 960px;
  padding: 16px; }
  .demo h2 {
    font-size: 32pt;
    text-align: center;
    margin: 16px; }
  .demo .primary-text {
    max-width: 720px;
    margin: 16px auto;
    font-size: 14pt; }
  .demo .center-text {
    text-align: left;
    margin-top: 32px;
    margin-bottom: 32px; }
  .demo .ss-diagram-container {
    margin-top: 32px; }
  .demo .demo-lead {
    max-width: 460px;
    margin: 16px auto;
    text-align: center;
    font-size: 14pt; }
  .demo .example-downloads {
    display: flex;
    margin: 16px;
    flex-wrap: wrap; }
    .demo .example-downloads a {
      display: flex;
      flex: 1;
      align-items: center;
      border: 1px solid #dae4ec;
      margin: 8px;
      padding: 16px;
      border-radius: 4px;
      color: #5e676e;
      text-decoration: none;
      transition: all 0.2s ease; }
      .demo .example-downloads a:visited {
        color: #5e676e; }
      .demo .example-downloads a img {
        width: 96px;
        min-height: 0;
        margin-right: 16px; }
      .demo .example-downloads a h3 {
        color: black;
        margin: 0;
        padding: 0; }
      .demo .example-downloads a p {
        margin: 0;
        padding: 0;
        text-transform: uppercase;
        font-size: 9pt;
        letter-spacing: 0.2px; }
      .demo .example-downloads a:hover {
        cursor: pointer;
        background: #e8eef3; }

.ss-diagram-container {
  text-align: center; }
  .ss-diagram-container .ss-button {
    margin-top: 16px;
    display: inline-block; }
  .ss-diagram-container .ss-diagram {
    position: relative;
    width: 96%;
    max-width: 900px;
    height: 600px;
    margin: 16px auto; }
    .ss-diagram-container .ss-diagram .ss-browser-window {
      box-shadow: 0px 1px 2px 0px rgba(127, 127, 127, 0.1);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      box-sizing: border-box;
      border-left: 4px solid gainsboro;
      border-right: 4px solid gainsboro;
      border-top: 48px solid gainsboro;
      border-bottom: 4px solid gainsboro;
      border-radius: 8px;
      background: gainsboro; }
    .ss-diagram-container .ss-diagram .ss-window-icons {
      position: absolute;
      top: -36px;
      bottom: 8px;
      left: 8px; }
      .ss-diagram-container .ss-diagram .ss-window-icons .ss-circle {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 8px;
        background: white;
        margin: 0 2px; }
    .ss-diagram-container .ss-diagram .ss-window-header {
      position: absolute;
      text-transform: uppercase;
      font-weight: 800;
      font-size: 7pt;
      letter-spacing: 4px;
      top: 12px;
      left: 36px;
      color: #5e676e; }
    .ss-diagram-container .ss-diagram .ss-window-nav {
      position: absolute;
      top: 2px;
      right: 36px; }
      .ss-diagram-container .ss-diagram .ss-window-nav .ss-nav-item {
        margin: 4px;
        text-transform: uppercase;
        font-size: 5pt;
        color: #5e676e;
        display: inline-block; }
    .ss-diagram-container .ss-diagram .ss-window-image {
      position: absolute;
      top: 36px;
      left: 0;
      right: 0;
      bottom: 0; }
      .ss-diagram-container .ss-diagram .ss-window-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 0 4px 4px; }
    .ss-diagram-container .ss-diagram .ss-window-fade {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(120, 120, 120, 0.5);
      border-radius: 4px; }
    .ss-diagram-container .ss-diagram .ss-window-hover {
      opacity: 0;
      background: rgba(120, 120, 120, 0.7);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease; }
      .ss-diagram-container .ss-diagram .ss-window-hover a {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        display: flex;
        text-decoration: none; }
        .ss-diagram-container .ss-diagram .ss-window-hover a .hover-text {
          padding: 16px 32px 12px 32px;
          background: rgba(0, 0, 0, 0.9);
          margin: auto;
          color: white;
          font-size: 10pt;
          text-transform: uppercase;
          letter-spacing: 1px;
          text-decoration: none;
          font-weight: 800; }
    .ss-diagram-container .ss-diagram:hover .ss-window-hover {
      opacity: 1; }
    .ss-diagram-container .ss-diagram .ss-peachs-demo-container {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      border-radius: 4px;
      overflow: hidden;
      display: flex; }
    .ss-diagram-container .ss-diagram .ss-peachs-demo {
      animation: 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.5s 1 both move-up;
      width: 360px;
      height: 320px;
      margin: auto;
      border-top: 2px solid gainsboro;
      border-left: 2px solid gainsboro;
      border-right: 2px solid gainsboro;
      border-bottom: 2px solid gainsboro;
      border-radius: 8px;
      background: white;
      box-shadow: 0px 1px 2px 0px rgba(127, 127, 127, 0.1);
      padding: 16px; }
      .ss-diagram-container .ss-diagram .ss-peachs-demo .ss-peachs-cover-image {
        border-radius: 8px 8px 0 0;
        height: 140px;
        width: 100%; }
        .ss-diagram-container .ss-diagram .ss-peachs-demo .ss-peachs-cover-image img {
          width: 100%;
          height: 100%;
          object-fit: cover; }
      .ss-diagram-container .ss-diagram .ss-peachs-demo .ss-peachs-header {
        margin-top: 20px;
        font-size: 12pt;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-align: center; }
      .ss-diagram-container .ss-diagram .ss-peachs-demo .ss-peachs-subheader {
        font-size: 9pt;
        color: #5e676e;
        margin: 4px 16px; }
      .ss-diagram-container .ss-diagram .ss-peachs-demo .ss-peachs-socials {
        margin: 12px auto;
        text-align: center; }
        .ss-diagram-container .ss-diagram .ss-peachs-demo .ss-peachs-socials h3 {
          font-size: 8pt;
          text-transform: uppercase;
          margin: 0 0 4px 0; }
        .ss-diagram-container .ss-diagram .ss-peachs-demo .ss-peachs-socials div {
          display: inline-block;
          padding: 8px 8px 6px 8px;
          line-height: 1; }
          .ss-diagram-container .ss-diagram .ss-peachs-demo .ss-peachs-socials div.email {
            background: #D9503F; }
          .ss-diagram-container .ss-diagram .ss-peachs-demo .ss-peachs-socials div.facebook {
            background: #405A93; }
          .ss-diagram-container .ss-diagram .ss-peachs-demo .ss-peachs-socials div.twitter {
            background: #48A1EB; }
          .ss-diagram-container .ss-diagram .ss-peachs-demo .ss-peachs-socials div.link {
            background: #97C05C; }
          .ss-diagram-container .ss-diagram .ss-peachs-demo .ss-peachs-socials div svg path {
            fill: white; }

.ss-button {
  color: black;
  background: white;
  font-size: 10pt;
  text-transform: uppercase;
  padding: 16px 32px;
  letter-spacing: 1px;
  text-decoration: none;
  font-weight: 800;
  transition: all 0.1s ease; }
  .ss-button:hover, .ss-button:focus {
    transform: scale(1.025); }
  .ss-button:visited {
    color: black; }

a.ss-button.ss-button-alt {
  background: black;
  color: white; }

.hero {
  position: relative;
  padding: 16px;
  padding-left: 80px;
  display: flex;
  flex-direction: column; }
  .hero .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    opacity: 0.75;
    background: #FBE3E3; }
  .hero .hero-header {
    margin-top: 128px;
    margin-bottom: 64px; }
  .hero .icon-side {
    max-width: 590px;
    margin: 0; }
    .hero .icon-side.referral-page-icon-side {
      max-width: 520px; }
      .hero .icon-side.referral-page-icon-side .lead {
        font-size: 20pt; }
    .hero .icon-side .lead {
      padding: 0;
      margin: 0; }
    .hero .icon-side .squarespace-icon {
      height: 100px;
      flex: 0;
      margin: -12px -12px -24px -24px; }
  .hero .hero-content {
    flex: 1;
    z-index: 2;
    box-sizing: border-box;
    max-width: 1024px;
    margin: 0 auto 72px auto;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    font-weight: 600;
    align-items: flex-start; }
    .hero .hero-content h1 {
      font-size: 48pt;
      line-height: 1.1;
      letter-spacing: -2px;
      color: black;
      line-height: 1.1;
      margin: 0;
      padding: 0; }
    .hero .hero-content .lead {
      font-size: 15pt; }
    .hero .hero-content .hero-price {
      font-size: 10pt;
      color: #5e676e;
      font-weight: 600; }
    .hero .hero-content .ss-button {
      text-align: center;
      display: block;
      width: 120px;
      background: black;
      color: white;
      margin: 64px 0 0 0; }

.key-stats {
  max-width: 1280px;
  margin: 160px auto 96px auto;
  text-align: center; }
  .key-stats .four-up {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; }
  .key-stats .item {
    padding: 24px 16px;
    width: 20%;
    box-sizing: border-box;
    margin: 16px;
    min-width: 210px;
    box-shadow: 0px 1px 2px 0px rgba(127, 127, 127, 0.3);
    border: 1px solid rgba(127, 127, 127, 0.1);
    border-radius: 8px; }
  .key-stats img {
    height: 100px; }
  .key-stats h2 {
    margin: 0;
    font-size: 24pt; }
  .key-stats p {
    font-size: 15pt;
    margin: 0; }
  .key-stats .source {
    text-align: right;
    color: gray;
    font-size: 11pt;
    margin-top: 36px; }

.products-split {
  padding: 8px; }
  .products-split h2 {
    text-align: center;
    font-size: 36pt;
    margin-bottom: 0; }
  .products-split .lead {
    font-size: 16pt;
    text-align: center;
    max-width: 720px;
    margin: 0 auto 0 auto;
    color: gray; }
  .products-split .three-up {
    max-width: 1024px;
    margin: 64px auto 0 auto; }
    .products-split .three-up .item {
      max-width: 400px;
      align-items: center;
      min-width: 280px;
      margin-bottom: 64px;
      padding: 48px 16px;
      box-sizing: border-box;
      box-shadow: 0px 1px 2px 0px rgba(127, 127, 127, 0.3);
      border: 1px solid rgba(127, 127, 127, 0.1);
      border-radius: 8px; }
      .products-split .three-up .item h3 {
        font-size: 20pt;
        margin-bottom: 0; }
      .products-split .three-up .item img {
        width: 150px;
        height: 150px; }
      .products-split .three-up .item p {
        margin-top: 12px;
        margin-bottom: 36px;
        text-align: center; }
      .products-split .three-up .item.subscriber-item {
        max-width: 600px; }
        .products-split .three-up .item.subscriber-item img {
          margin-bottom: 0; }

.why-word-of-mouth {
  max-width: 720px;
  margin: 96px auto;
  padding: 8px; }
  .why-word-of-mouth h2 {
    font-size: 32pt;
    text-align: center;
    line-height: 1.2;
    margin: 16px; }
  .why-word-of-mouth .lead {
    font-size: 16pt;
    text-align: center;
    max-width: 720px; }
  .why-word-of-mouth .heading-image {
    display: flex;
    align-items: center;
    margin-top: 64px; }
    .why-word-of-mouth .heading-image img {
      width: 100px;
      margin: 8px; }
    .why-word-of-mouth .heading-image h3 {
      font-size: 22pt;
      margin: 8px; }
  .why-word-of-mouth p {
    max-width: 480px;
    margin: 0 auto 16px auto; }

.we-tick-boxes {
  max-width: 1200px;
  margin: 160px auto 96px auto; }
  .we-tick-boxes img {
    display: block;
    max-height: 200px;
    margin: 16px auto 64px auto; }
  .we-tick-boxes h2 {
    font-size: 32pt;
    text-align: center;
    line-height: 1.2;
    margin: 16px; }
  .we-tick-boxes .lead {
    font-size: 16pt;
    text-align: center;
    max-width: 720px;
    margin: 0 auto 96px auto; }
  .we-tick-boxes .three-up .item h3 {
    margin-top: 0;
    margin-bottom: 16px;
    text-align: center; }
  .we-tick-boxes .three-up .item p {
    margin-top: 0; }
  .we-tick-boxes .three-up .item img {
    width: 150px;
    height: 150px;
    margin: 8px; }

.who-for {
  max-width: 720px;
  margin: 200px auto 160px auto;
  padding: 8px; }
  .who-for h2 {
    font-size: 32pt;
    text-align: center;
    line-height: 1.2;
    margin: 16px; }
  .who-for h3 {
    margin-top: 48px;
    margin-bottom: 0;
    font-size: 22pt; }
  .who-for p {
    margin-bottom: 64px; }
  .who-for img {
    height: 120px;
    margin: 0 16px;
    float: right; }

.pals-icons {
  opacity: 0.4;
  display: flex;
  align-items: center;
  margin: 16px;
  justify-content: center;
  flex-wrap: wrap; }
  .pals-icons img {
    margin: 16px; }
  .pals-icons .squarespace {
    height: 80px;
    margin-right: 0;
    margin-left: 0; }
  .pals-icons .stripe {
    margin-left: 0;
    height: 60px; }
  .pals-icons .twitter, .pals-icons .facebook {
    height: 40px; }

.content {
  margin: 168px auto;
  max-width: 520px;
  padding: 8px; }
  .content.content-1 {
    margin-top: 96px; }
  .content.content-2 {
    margin-top: 96px; }
  .content h2 {
    font-size: 20pt; }
  .content p {
    font-size: 1.1em;
    max-width: 400px;
    margin-left: 4px;
    margin-right: 4px; }

.concept {
  padding: 196px 0;
  display: flex;
  align-items: center; }
  .concept .left {
    width: 50%;
    padding: 36px;
    flex: 1; }
    .concept .left h2 {
      font-size: 18pt;
      text-align: center; }
    .concept .left p {
      font-size: 12pt;
      text-align: center; }
    .concept .left a {
      margin-top: 16px;
      display: inline-block; }
  .concept .right {
    width: 50%;
    flex: 1;
    height: 600px;
    background: url(/statics/squarespace-referral-mockup-2.png) no-repeat left center white;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; }

.we-solve {
  max-width: 960px;
  margin: 128px auto 128px auto;
  padding: 16px; }
  .we-solve h2 {
    font-size: 32pt;
    text-align: center;
    line-height: 1.2;
    margin: 16px; }
  .we-solve .we-solve-lead {
    max-width: 720px;
    margin: 16px auto;
    font-size: 14pt; }
  .we-solve ol {
    margin-top: 72px;
    max-width: 500px;
    margin: 96px auto;
    font-size: 12pt; }
  .we-solve li {
    position: relative;
    padding-bottom: 24px; }
  .we-solve .link {
    color: #009688;
    text-decoration: underline; }
    .we-solve .link:hover {
      cursor: pointer; }
  .we-solve li img {
    width: 64px;
    height: 64px;
    position: absolute;
    left: -96px;
    top: -24px; }
  .we-solve ol li p.title {
    font-weight: bold;
    font-size: 13pt;
    margin-bottom: 0; }
  .we-solve ol li p {
    margin-top: 0; }

.exclusive, .support {
  display: flex;
  margin: 196px auto;
  align-items: center;
  justify-content: center; }
  .exclusive .text-container, .support .text-container {
    flex: 1;
    padding: 36px;
    max-width: 480px; }
    .exclusive .text-container h2, .support .text-container h2 {
      font-size: 36pt;
      font-weight: 700;
      line-height: 1.2; }
    .exclusive .text-container p, .support .text-container p {
      font-size: 14pt; }
  .exclusive .image-container, .support .image-container {
    flex: 1;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    max-width: 460px; }
    .exclusive .image-container img, .support .image-container img {
      padding: 0;
      width: 100%;
      align-self: center; }

.custom {
  padding: 96px 16px 0 16px;
  border-top: 4px solid #dae4ec;
  border-bottom: 4px solid #dae4ec;
  box-sizing: border-box;
  position: relative; }
  .custom .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    z-index: -1; }
  .custom .custom-text {
    border-radius: 8px 8px 0 0;
    border-top: 4px solid #dae4ec;
    border-left: 4px solid #dae4ec;
    border-right: 4px solid #dae4ec;
    background: white;
    color: black;
    padding: 24px 64px;
    font-size: 12pt;
    max-width: 480px;
    margin: 160px auto -4px;
    box-sizing: border-box; }
  .custom h2 {
    text-align: center;
    font-size: 64pt;
    font-weight: 700;
    color: white;
    text-align: center; }
  .custom h3 {
    text-align: center;
    line-height: 1.2;
    font-size: 18pt; }

.stats-quote {
  max-width: 720px;
  margin: 128px auto 72px auto; }
  .stats-quote h2 {
    text-align: right;
    font-weight: normal;
    font-size: 24pt;
    padding: 16px; }

.stats {
  max-width: 960px;
  position: relative;
  margin: 48px auto 96px auto; }
  .stats img {
    width: 100%;
    max-width: 960px;
    margin: 0 auto; }
  .stats .text {
    display: flex;
    align-items: center;
    position: absolute;
    justify-content: space-evenly;
    left: 48px;
    right: 128px;
    top: 48px; }
    .stats .text > span {
      padding: 8px;
      background: rgba(255, 255, 255, 0.75);
      border-radius: 8px; }
      .stats .text > span .label {
        display: block;
        margin: 0px;
        text-align: center;
        font-size: 10pt;
        color: #98a5af;
        font-weight: normal; }
      .stats .text > span.name {
        font-size: 32pt;
        font-weight: bold; }
      .stats .text > span.total {
        font-size: 18pt;
        font-weight: bold; }
      .stats .text > span.profit {
        font-size: 18pt;
        font-weight: bold; }

.pricing-hero .hero-content {
  margin-top: 72px;
  margin-bottom: 0;
  text-align: center; }
  .pricing-hero .hero-content h1 {
    font-size: 44pt;
    letter-spacing: 0.5px;
    text-align: center;
    display: block;
    margin: 24px auto;
    max-width: 960px;
    line-height: 1.9;
    font-weight: 700;
    color: #1b1a1a; }
    .pricing-hero .hero-content h1 .highlight {
      font-weight: 700;
      box-shadow: none;
      border: none;
      background: none;
      text-decoration: underline; }
  .pricing-hero .hero-content h2 {
    font-size: 26pt;
    letter-spacing: 0.5px;
    text-align: center;
    display: block;
    margin: 24px auto; }
  .pricing-hero .hero-content .lead {
    font-weight: normal;
    font-size: 14pt;
    max-width: 500px;
    line-height: 2;
    margin: 8px auto 24px auto; }
    .pricing-hero .hero-content .lead a {
      color: black;
      font-weight: bold;
      text-decoration: none; }
  .pricing-hero .hero-content span {
    margin: 4px;
    border-radius: 4px;
    background: #ffe2e3;
    box-shadow: 4px 0 0 #ffe2e3, -4px 0 0 #ffe2e3; }

.how-it-works-hero .hero-content {
  margin-top: 36px; }
  .how-it-works-hero .hero-content .hero-image {
    height: 280px;
    margin: 0 auto 36px auto;
    max-width: 100%; }
  .how-it-works-hero .hero-content .icon-image {
    height: 40px; }
  .how-it-works-hero .hero-content h1 {
    font-size: 36pt;
    line-height: 1.2; }
  .how-it-works-hero .hero-content .lead {
    max-width: 720px; }
    .how-it-works-hero .hero-content .lead .ss-button {
      color: white; }

.integration-options {
  max-width: 760px;
  margin: 48px auto;
  text-align: center; }
  .integration-options.what-customers-see {
    margin-top: 160px; }
  .integration-options h2 {
    font-size: 24pt; }
  .integration-options .lead {
    font-size: 14pt;
    margin-bottom: 36px; }
  .integration-options .options-list {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap; }
    .integration-options .options-list .item {
      margin: 8px;
      display: flex;
      align-items: center;
      flex-direction: column;
      min-width: 168px; }
      .integration-options .options-list .item.custom-emails img {
        padding: 32px;
        box-sizing: border-box; }
      .integration-options .options-list .item img {
        height: 160px;
        max-width: 100%;
        width: auto; }
      .integration-options .options-list .item p {
        font-weight: 600; }
  .integration-options .pdf-download {
    display: flex;
    flex: 1;
    align-items: center;
    border: 1px solid #dae4ec;
    padding: 16px;
    border-radius: 4px;
    color: #5e676e;
    text-decoration: none;
    transition: all 0.2s ease;
    max-width: 320px;
    margin: 8px auto; }
    .integration-options .pdf-download:hover {
      cursor: pointer;
      background: #e8eef3; }
    .integration-options .pdf-download img {
      height: 60px;
      margin-right: 16px; }
    .integration-options .pdf-download > div {
      display: flex;
      flex-direction: column;
      align-items: flex-start; }
    .integration-options .pdf-download .heading {
      font-size: 14pt;
      color: black;
      font-weight: bold; }
    .integration-options .pdf-download .download {
      margin: 0;
      padding: 0;
      text-transform: uppercase;
      font-size: 9pt;
      letter-spacing: 0.2px; }

.testimonial.how-it-works-testimonial .quote {
  margin-bottom: 0; }

.testimonial.how-it-works-testimonial .attribution {
  margin-top: 24px; }

.testimonial.how-it-works-testimonial img {
  height: 30px;
  width: auto;
  max-width: 100%;
  border-radius: 0;
  margin-right: 0; }

.pricing {
  margin: 0 auto 80px auto;
  padding: 0 16px; }
  .pricing .pricing-contact-us {
    max-width: 460px;
    padding-left: 8px;
    padding-right: 8px;
    margin: 48px auto 0 auto;
    text-align: center;
    color: gray;
    border: 1px solid gainsboro;
    border-radius: 8px; }
  .pricing .trial-plan {
    text-align: center;
    margin-top: 16px;
    margin-bottom: 0;
    color: gray; }
  .pricing .question {
    text-decoration: none;
    color: gray;
    background: #f1f1f1;
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
    text-align: center;
    font-weight: 700;
    line-height: 24px;
    width: 24px;
    height: 24px;
    font-size: 10pt;
    transition: all 0.2s ease; }
    .pricing .question:hover {
      transform: scale(1.1); }
  .pricing h2 {
    max-width: 1040px;
    font-size: 36pt;
    text-align: center;
    line-height: 1.2;
    margin: 16px auto; }
  .pricing .pricing-lead {
    font-size: 14pt;
    max-width: 660px;
    margin: 16px auto;
    text-align: center; }
  .pricing .pricing-prompt {
    margin-top: 96px;
    max-width: 480px; }
  .pricing .for {
    text-align: center;
    font-size: 12pt;
    font-weight: 600; }
  .pricing .pricing-separator {
    margin: 48px 0;
    box-sizing: border-box;
    background: gainsboro;
    height: 2px; }
  .pricing .three-up {
    justify-content: center; }
    .pricing .three-up.second-row {
      align-items: center; }
    .pricing .three-up .item {
      flex: 1;
      min-width: 260px;
      max-width: 320px;
      border: 1px solid gainsboro;
      padding: 32px 8px 32px 8px;
      margin: 8px;
      background: white; }
      .pricing .three-up .item:nth-child(1) {
        border-top: 8px solid #84aba8; }
      .pricing .three-up .item:nth-child(2) {
        border-top: 8px solid #00c792; }
      .pricing .three-up .item:nth-child(3) {
        border-top: 8px solid #11998e; }
      .pricing .three-up .item.pricing-faqs {
        padding: 16px 36px;
        max-width: unset;
        box-sizing: border-box;
        border: none;
        max-width: 720px;
        background: #f1f1f1; }
        .pricing .three-up .item.pricing-faqs .faq-item .faq {
          font-weight: bold;
          margin-bottom: 0; }
        .pricing .three-up .item.pricing-faqs .faq-item .answer {
          margin-top: 0;
          color: #615c5c; }
      .pricing .three-up .item.pricing-enterprise {
        display: flex;
        align-items: center;
        flex-wrap: wrap; }
        .pricing .three-up .item.pricing-enterprise .ss-button {
          display: inline-block;
          margin: 24px 0 16px 0; }
        .pricing .three-up .item.pricing-enterprise p {
          margin: 32px 16px; }
        .pricing .three-up .item.pricing-enterprise ul {
          margin-top: 0; }
      .pricing .three-up .item ul {
        margin: 36px 0 16px 0;
        padding: 0; }
        .pricing .three-up .item ul li {
          list-style-type: none;
          margin-bottom: 8px; }
          .pricing .three-up .item ul li i {
            display: inline-block;
            margin-right: 8px;
            color: #03a87c; }
      .pricing .three-up .item h3 {
        margin: 0;
        font-size: 18pt; }
      .pricing .three-up .item img {
        width: auto;
        height: 140px; }
      .pricing .three-up .item .for {
        margin-bottom: 0; }
      .pricing .three-up .item .ss-button {
        margin-top: 32px; }
      .pricing .three-up .item .price-commission {
        margin: 0;
        color: gray;
        padding: 0;
        font-size: 10pt;
        margin-bottom: 8px;
        margin-top: 8px; }
      .pricing .three-up .item .price-label {
        font-size: 32pt;
        font-weight: 700;
        margin-top: 24px;
        margin-bottom: 0;
        line-height: 1;
        font-family: sans-serif; }
        .pricing .three-up .item .price-label .month {
          font-size: 12pt;
          font-weight: 400;
          color: gray; }
      .pricing .three-up .item .price-sublabel {
        margin-top: 0;
        margin-bottom: 0; }
      .pricing .three-up .item .price-sublabel-small {
        font-size: 10pt;
        margin: 0;
        margin-bottom: 32px; }
      .pricing .three-up .item .enterprise {
        margin-top: 24px;
        background: #f1f1f1; }

.content {
  display: flex;
  align-items: center;
  max-width: 760px; }
  .content .left {
    margin-right: 64px; }

.circle-icon {
  width: 128px;
  height: 128px;
  background: #f1f1f1;
  border-radius: 128px;
  padding: 32px;
  box-sizing: border-box; }

.testimonial {
  max-width: 720px;
  margin: 196px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px; }
  .testimonial .quote {
    text-align: center;
    font-size: 18pt;
    font-weight: 400;
    position: relative;
    border-width: 2px 0;
    border-style: solid;
    border-color: #eee;
    padding: 1.5em 0 1.5em; }
    .testimonial .quote:before {
      content: '\201C';
      font-size: 7em;
      position: absolute;
      top: 0em;
      left: 50%;
      transform: translate(-50%, -50%); }
    .testimonial .quote span {
      margin: 4px;
      border-radius: 4px;
      background: #ffe2e3;
      box-shadow: 4px 0 0 #ffe2e3, -4px 0 0 #ffe2e3; }
    .testimonial .quote strong {
      font-weight: 700; }
  .testimonial .attribution {
    color: #5e676e;
    font-size: 16pt;
    display: flex;
    align-items: center;
    margin-bottom: 0; }
    .testimonial .attribution a, .testimonial .attribution a:visited {
      color: inherit; }
  .testimonial .attribution-subtext {
    margin-top: 0;
    color: #5e676e;
    max-width: 400px;
    text-align: center;
    padding: 8px; }
  .testimonial img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 16px; }

.big-quote-testimonial-container {
  padding: 48px 8px;
  margin-top: 96px; }
  .big-quote-testimonial-container .about {
    max-width: 540px;
    margin: 8px auto 0 auto;
    font-size: 18pt;
    text-align: center; }
    .big-quote-testimonial-container .about a, .big-quote-testimonial-container .about a:visited {
      color: #342216; }

.big-quote-testimonial {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap; }
  .big-quote-testimonial .hero-image {
    min-width: 120px;
    flex: 2; }
    .big-quote-testimonial .hero-image .mockup {
      width: 100%; }
  .big-quote-testimonial .icons {
    display: flex;
    align-items: center;
    justify-content: center; }
    .big-quote-testimonial .icons img {
      margin: 2px 4px;
      height: 40px; }
    .big-quote-testimonial .icons .forbes {
      height: 20px; }
  .big-quote-testimonial .customer-content {
    min-width: 360px;
    flex: 3;
    flex-direction: column; }
    .big-quote-testimonial .customer-content .quote {
      margin: 32px;
      position: relative; }
      .big-quote-testimonial .customer-content .quote span {
        margin: 4px;
        border-radius: 4px;
        background: #ffe2e3;
        box-shadow: 4px 0 0 #ffe2e3, -4px 0 0 #ffe2e3; }
    .big-quote-testimonial .customer-content .quote:before {
      content: '\201C';
      font-size: 7em;
      position: absolute;
      top: 50%;
      left: -32px;
      transform: translate(-50%, -50%); }
    .big-quote-testimonial .customer-content .attribution {
      display: flex;
      align-items: center; }
      .big-quote-testimonial .customer-content .attribution .attribution-text {
        display: flex;
        flex-direction: column; }
        .big-quote-testimonial .customer-content .attribution .attribution-text .name {
          font-weight: bold; }
      .big-quote-testimonial .customer-content .attribution img {
        height: 64px;
        border-radius: 50%;
        margin: 8px;
        vertical-align: middle; }

.quotes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 96px; }
  .quotes img {
    max-width: 420px;
    margin: auto 64px; }
  .quotes .right {
    max-width: 560px;
    min-width: 220px;
    flex: 1;
    padding: 16px; }
    .quotes .right p {
      font-size: 18pt; }
    .quotes .right .link-button {
      margin: 32px 0;
      font-size: 10pt; }

.big-chart {
  max-width: 720px;
  margin: 64px auto 16px auto; }
  .big-chart img {
    width: 100%; }

.big-companies .left {
  max-width: 480px; }

.big-companies .right {
  box-sizing: border-box;
  opacity: 0.85; }
  .big-companies .right div:nth-child(1) {
    text-align: center;
    margin-bottom: 48px; }
  .big-companies .right div:nth-child(2) {
    text-align: center;
    margin-bottom: 48px; }
  .big-companies .right div:nth-child(3) {
    text-align: center; }

.big-companies img {
  max-width: 200px; }
  .big-companies img.dropbox {
    width: 96px; }

.book {
  background: #f1f1f1; }
  .book .book-container {
    padding: 8px;
    max-width: 420px;
    margin: 32px auto;
    padding: 128px; }
    .book .book-container h2 {
      font-size: 96pt;
      color: #009688;
      margin-bottom: 0;
      margin-top: 0;
      line-height: 1.25em; }
    .book .book-container .quote {
      font-size: 13pt; }
    .book .book-container .attribution {
      margin-bottom: 2px;
      margin-top: 64px;
      font-size: 12pt;
      font-weight: bold; }
    .book .book-container .book-title {
      margin-top: 0;
      font-style: italic;
      margin-bottom: 36px; }

.features {
  padding: 16px;
  max-width: 1200px;
  margin: 160px auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap; }
  .features .left {
    flex: 1;
    margin: 32px; }
    .features .left h2 {
      font-size: 20pt;
      line-height: 1.2;
      margin: 0 0 8px 0;
      text-align: center; }
    .features .left .integrations-content {
      text-align: center;
      margin-top: 48px; }
      .features .left .integrations-content p {
        margin: 0;
        padding: 0;
        margin-top: -12px; }
      .features .left .integrations-content img {
        height: 50px;
        margin: 0;
        margin-left: -12px; }
      .features .left .integrations-content .stripe {
        margin-top: 24px; }
  .features .right {
    min-width: 360px;
    flex: 2;
    margin: auto;
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid gainsboro;
    background: #f6f6f6; }
    .features .right .item {
      width: 50%;
      box-sizing: border-box;
      padding: 16px;
      display: flex;
      align-items: center;
      font-weight: 600; }
      .features .right .item img {
        height: 60px;
        margin-right: 8px; }
    .features .right a {
      color: black; }

.final-cta {
  text-align: center;
  margin: 160px auto; }
  .final-cta a {
    display: inline-block; }

.large-feature-grid {
  margin-top: 220px; }
  .large-feature-grid h2 {
    font-size: 32pt;
    text-align: center;
    line-height: 1.2;
    margin: 16px; }
  .large-feature-grid .lead {
    max-width: 600px;
    margin: 16px auto;
    font-size: 14pt;
    text-align: center; }
  .large-feature-grid .feature-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    .large-feature-grid .feature-grid .feature-item {
      width: 30%;
      margin: 1%;
      min-width: 256px; }
      .large-feature-grid .feature-grid .feature-item h3 {
        margin: 0; }
      .large-feature-grid .feature-grid .feature-item img {
        height: 100px; }

.referral-faqs {
  margin-top: 200px;
  padding: 8px; }
  .referral-faqs h2 {
    font-size: 32pt;
    text-align: center;
    line-height: 1.2;
    margin: 16px; }
  .referral-faqs .lead {
    max-width: 600px;
    margin: 16px auto;
    font-size: 14pt;
    text-align: center; }
  .referral-faqs .faq-item {
    max-width: 600px;
    margin: 32px auto;
    padding-bottom: 16px;
    border-bottom: 1px solid #eaeaea; }
    .referral-faqs .faq-item h3 {
      font-size: 18pt; }
    .referral-faqs .faq-item .faq-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center; }
    .referral-faqs .faq-item .toggle, .referral-faqs .faq-item .toggle:visited {
      background: #e8eef3;
      color: #5e676e;
      text-decoration: none;
      display: inline-block;
      padding: 10px 25px;
      margin: auto 8px;
      text-transform: uppercase;
      font-size: 11pt;
      letter-spacing: 1px;
      font-weight: 600;
      transition: all 0.1s ease; }
      .referral-faqs .faq-item .toggle:hover, .referral-faqs .faq-item .toggle:active, .referral-faqs .faq-item .toggle:visited:hover, .referral-faqs .faq-item .toggle:visited:active {
        transform: scale(1.025); }
    .referral-faqs .faq-item p {
      display: none;
      transition: all 0.2s ease; }
      .referral-faqs .faq-item p.active {
        display: block; }

.partners {
  max-width: 760px;
  padding: 16px;
  margin: 48px auto 128px auto;
  box-sizing: border-box;
  text-align: center; }
  .partners h2 {
    text-align: center;
    font-size: 22pt; }
  .partners p {
    max-width: 420px;
    margin: 0 auto;
    margin-bottom: 36px; }
  .partners .need-integration {
    margin-top: 48px; }
    .partners .need-integration a, .partners .need-integration a:visited {
      color: #009688; }
  .partners img {
    height: 40px;
    display: inline-block;
    margin: 8px 12px;
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease; }
    .partners img:hover {
      filter: none;
      -webkit-filter: grayscale(0%);
      -moz-filter: grayscale(0%);
      -ms-filter: grayscale(0%);
      -o-filter: grayscale(0%); }

.guarantee {
  display: flex;
  align-items: center;
  max-width: 720px;
  padding: 16px;
  margin: 8px auto 128px auto; }
  .guarantee a, .guarantee a:visited {
    color: #009688; }
  .guarantee .ss-button, .guarantee .ss-button:visited {
    margin-top: 36px;
    display: inline-block;
    background: #f1f1f1;
    color: black; }
  .guarantee .left {
    flex: 1;
    padding: 24px; }
    .guarantee .left img {
      width: 100%; }
  .guarantee .right {
    flex: 3; }
    .guarantee .right h3 {
      font-size: 20pt; }
    .guarantee .right p {
      font-size: 12pt; }

.case-study {
  padding: 0;
  background: url(/statics/mac.jpeg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  margin-bottom: 128px; }
  .case-study h2 {
    text-align: center;
    font-size: 22pt; }
  .case-study a {
    color: #009688; }
    .case-study a:visited {
      color: #009688; }
  .case-study .intro {
    max-width: 400px;
    margin: 0;
    background: white;
    padding: 196px 64px; }
  .case-study .tweets {
    max-width: 620px;
    margin-top: 32px; }
    .case-study .tweets .tweet {
      background: rgba(255, 255, 255, 0.95);
      padding: 16px 32px;
      border-radius: 8px;
      border: 1px solid #e8eef3;
      text-align: left;
      box-shadow: 0px 1px 2px 0px rgba(127, 127, 127, 0.3);
      font-size: 10pt; }
      .case-study .tweets .tweet .author {
        color: #98a5af;
        font-size: 0.8em;
        text-align: right; }
    .case-study .tweets .tweet {
      margin-right: 16px; }
    .case-study .tweets .tweet:nth-child(1) {
      margin-left: 64px; }
    .case-study .tweets .tweet:nth-child(2) {
      margin-top: 32px;
      margin-bottom: 32px;
      margin-left: 8px; }
    .case-study .tweets .tweet:nth-child(3) {
      margin-left: 64px;
      margin-right: 64px; }

.big-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #FBE3E3;
  border-top: 8px solid #f6c1c1;
  padding: 64px 32px;
  margin-top: 196px; }
  .big-foot .item {
    flex: 1;
    min-width: 280px;
    max-width: 320px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 16px; }
  .big-foot .contact a {
    text-decoration: underline;
    color: inherit;
    font-weight: bold; }
    .big-foot .contact a:visited {
      color: inherit; }
  .big-foot .social-link {
    margin-bottom: 0;
    margin-top: 0;
    display: flex;
    align-items: center; }
    .big-foot .social-link span {
      flex: 1; }
    .big-foot .social-link a {
      margin: 0;
      padding: 5px;
      flex: 2; }
  .big-foot .featured-guides a {
    text-decoration: underline;
    color: inherit; }
    .big-foot .featured-guides a:visited {
      color: inherit; }
  .big-foot h2 {
    font-size: 22pt; }
  .big-foot .contact .link-button-alt {
    color: #342216; }
  .big-foot .actions .ss-button {
    display: block;
    color: white;
    margin: 8px; }

.dots-list {
  width: 100%; }

.dots-list ol {
  padding-left: 50px;
  position: relative;
  margin-bottom: 20px;
  list-style: none !important; }

.dots-list ol li {
  position: relative;
  margin-top: 0em;
  margin-bottom: 20px; }

.dots-list ol li .number_divider {
  position: absolute;
  left: -50px;
  font-weight: 800;
  font-size: 2em;
  top: -5px; }

.dots-list ol li:before {
  content: "";
  background: #009688;
  position: absolute;
  width: 2px;
  top: 6px;
  bottom: -26px;
  left: -24px; }

.dots-list ol li:after {
  content: "";
  background: #009688;
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  top: 6px;
  left: -31px; }

.dots-list ol li:last-child:before {
  content: "";
  background: #ffffff; }

@media (max-width: 860px) {
  .hero {
    flex-wrap: wrap;
    padding: 8px; }
  .hero .icon-side {
    margin: 16px;
    flex-direction: column; }
    .hero .icon-side .squarespace-icon {
      margin: 4px; }
  .hero .hero-content {
    margin-top: 36px;
    padding: 16px 0;
    min-width: 0;
    width: 100%;
    text-align: center;
    align-items: center; }
    .hero .hero-content .hero-price {
      align-self: center; }
  .prelaunch-container .customers.affiliate-customers {
    margin-bottom: 36px; }
    .prelaunch-container .customers.affiliate-customers .border {
      margin-bottom: 36px; }
  .prelaunch-container .testimonial {
    margin-top: 64px; }
  .hero .hero-content .ss-button {
    margin: 32px auto; }
  .hero .hero-content h1 {
    font-size: 32pt;
    min-width: 0;
    max-width: none;
    padding: 8px;
    text-align: center; }
  .hero .hero-header {
    margin-top: 16px;
    margin-bottom: 32px; }
  .products-split h2 {
    font-size: 24pt; }
  .hero .hero-content .lead {
    margin-bottom: 24px; }
  .testimonial .quote {
    font-size: 16pt; }
  .we-are-unique h2 {
    font-size: 24pt; }
  .referral-faqs h2 {
    font-size: 24pt; }
  .pricing-hero .hero-content h1 {
    font-size: 24pt; }
  .pricing-hero .hero-content h2 {
    font-size: 18pt; }
  .demo .ss-diagram-container {
    margin-left: 0;
    width: 100%;
    height: 600px; }
  .ss-diagram-container .ss-diagram .ss-peachs-demo {
    left: 5%;
    right: 5%; }
  .concept {
    flex-wrap: wrap-reverse; }
    .concept .right {
      min-width: 200px;
      background-position-x: center;
      width: 100%; }
  .exclusive img, .support img {
    min-width: 200px; }
  .exclusive {
    flex-wrap: wrap; }
  .support {
    flex-wrap: wrap-reverse; }
  .custom .custom-text {
    padding: 16px 8px; }
  .stats-quote h2 {
    font-size: 16pt; }
  .quotes .right {
    margin-left: 48px;
    margin-top: 16px; }
  .case-study {
    flex-wrap: wrap; }
    .case-study .intro {
      max-width: none;
      padding: 16px; }
    .case-study .tweets {
      margin: 32px; }
  .content {
    flex-wrap: wrap; }
    .content .left {
      margin-right: 0; }
    .content .right {
      min-width: 240px; }
  .content.content-2 {
    flex-wrap: wrap-reverse; }
    .content.content-2 .right {
      min-width: 0; }
  .quotes img {
    margin: auto 0;
    width: 100%; }
  .quotes .right {
    margin: 16px 8px; }
  .big-companies {
    flex-direction: column-reverse; }
  .cartoon .arrow {
    display: none; }
  .cartoon .panel {
    margin: 8px; }
  .we-solve {
    padding: 8px; }
  .we-solve li img {
    display: none; }
  .case-study .tweets {
    margin: 4px; }
  .case-study .tweets .tweet {
    padding: 16px 8px;
    font-size: 8pt; }
  .case-study .tweets .tweet:nth-child(1) {
    margin: 16px 0; }
  .case-study .tweets .tweet:nth-child(2) {
    margin: 16px 0; }
  .case-study .tweets .tweet:nth-child(3) {
    margin: 16px 0; }
  .book .book-container {
    padding: 48px 16px; }
  .big-quote-testimonial .customer-content .quote::before {
    display: none; }
  .customers .customers-icons a {
    margin: 8px; }
    .customers .customers-icons a img {
      height: 50px; }
  .large-feature-grid .feature-grid .feature-item {
    width: 100%; }
  .key-benefits {
    flex-direction: column; }
    .key-benefits .benefit {
      flex-direction: column;
      width: 100%;
      align-items: flex-start; }
      .key-benefits .benefit:nth-child(2), .key-benefits .benefit:nth-child(4), .key-benefits .benefit:nth-child(6) {
        flex-direction: column; }
      .key-benefits .benefit .benefit-image img {
        height: 140px;
        margin: 8px 16px;
        width: unset; }
      .key-benefits .benefit .benefit-text {
        padding: 8px; }
        .key-benefits .benefit .benefit-text h2 {
          margin-top: 16px;
          font-size: 18pt; }
        .key-benefits .benefit .benefit-text p {
          font-size: 12pt; } }

.prelaunch-container .header .right-part a.ss-button-alt {
  background: #368390; }

.prelaunch-container .hero .background {
  background: #5ccfdd;
  opacity: 0.7; }

.prelaunch-container .hero .icon-side.referral-page-icon-side .lead {
  color: black; }

.prelaunch-container .large-feature-grid .feature-grid .feature-item {
  text-align: center; }
  .prelaunch-container .large-feature-grid .feature-grid .feature-item i {
    display: block;
    font-size: 50pt;
    margin-bottom: 16px; }

.prelaunch-container .testimonial {
  margin-top: 64px; }

.prelaunch-container .hero {
  position: relative;
  padding-bottom: 80px; }
  .prelaunch-container .hero .cloud-background {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 96px; }
    .prelaunch-container .hero .cloud-background .clouds {
      width: 100%;
      height: 100%;
      background-image: url(/statics/prelaunch/milestone-curve-border.svg);
      background-repeat: repeat-x; }

:root {
  --gambit-theme-color: #3F51B5; }

:root {
  --affiliateThemePrimaryAccentColor: #0078F8;
  --affiliateThemeSecondaryAccentColor: #7F50C5;
  --affiliateThemePrimaryLabelColor: #222222;
  --affiliateThemeSecondaryLabelColor: #9e9e9e;
  --affiliateThemeBackgroundColor: #e8eef3;
  --affiliateThemeBorderColor: #C2C7CB;
  --affiliateThemeDangerColor: #d23434;
  --affiliateThemeContentBackgroundColor: white;
  --affiliateThemeContentBoxShadow: 0 0 2px rgba(127, 127, 127, 0.3);
  --affiliateThemeBorderRadius: 4px;
  --affiliateThemeFontFamily: $font-sans;
  --affiliateThemeFontSize: 12pt; }

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(-20px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(20px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

/* common */
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute; }

.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #FEC066; }

.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #FEC066;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #44331a;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-weight: bold; }

/* top left*/
.ribbon-top-left {
  top: -10px;
  left: -10px; }

.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent; }

.ribbon-top-left::before {
  top: 0;
  right: 0; }

.ribbon-top-left::after {
  bottom: 0;
  left: 0; }

.ribbon-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg); }

/* top right*/
.ribbon-top-right {
  top: -10px;
  right: -10px; }

.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent; }

.ribbon-top-right::before {
  top: 0;
  left: 0; }

.ribbon-top-right::after {
  bottom: 0;
  right: 0; }

.ribbon-top-right span {
  left: -25px;
  top: 30px;
  transform: rotate(45deg); }

/* bottom left*/
.ribbon-bottom-left {
  bottom: -10px;
  left: -10px; }

.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
  border-bottom-color: transparent;
  border-left-color: transparent; }

.ribbon-bottom-left::before {
  bottom: 0;
  right: 0; }

.ribbon-bottom-left::after {
  top: 0;
  left: 0; }

.ribbon-bottom-left span {
  right: -25px;
  bottom: 30px;
  transform: rotate(225deg); }

/* bottom right*/
.ribbon-bottom-right {
  bottom: -10px;
  right: -10px; }

.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
  border-bottom-color: transparent;
  border-right-color: transparent; }

.ribbon-bottom-right::before {
  bottom: 0;
  left: 0; }

.ribbon-bottom-right::after {
  top: 0;
  right: 0; }

.ribbon-bottom-right span {
  left: -25px;
  bottom: 30px;
  transform: rotate(-225deg); }

.header.guides-header a {
  color: #342216; }

.guides-header-container {
  background: #FBE3E3; }

.guides {
  max-width: 1200px;
  margin: 48px auto; }
  .guides .page-explainer {
    display: flex;
    max-width: 600px;
    align-items: center; }
    .guides .page-explainer h1 {
      font-size: 24pt; }
    .guides .page-explainer .circle-icon {
      width: 60px;
      height: 60px;
      border-radius: 60px;
      background: #f1f1f1;
      margin-right: 16px;
      position: relative; }
    .guides .page-explainer img {
      width: 36px;
      left: 14px;
      position: absolute;
      top: 14px; }
  .guides a, .guides a:visited {
    text-decoration: none;
    color: #342216; }
    .guides a:hover h2, .guides a:visited:hover h2 {
      text-decoration: underline; }
  .guides .guides-list {
    display: flex;
    flex-wrap: wrap; }
  .guides .guide {
    max-width: 320px;
    margin: 48px 24px; }
    .guides .guide h2 {
      margin-bottom: 0; }
    .guides .guide p {
      margin-top: 0; }
    .guides .guide img {
      max-width: 320px;
      height: 220px;
      object-fit: contain; }

.article-big-image {
  max-width: 720px;
  margin: 48px auto; }
  .article-big-image img {
    width: 100%; }

.article-container {
  max-width: 600px;
  padding: 16px;
  margin: 0 auto;
  /* Code Styles */ }
  .article-container.affiliate-article {
    max-width: 820px; }
    .article-container.affiliate-article p, .article-container.affiliate-article h1, .article-container.affiliate-article h2, .article-container.affiliate-article h3, .article-container.affiliate-article .byline, .article-container.affiliate-article ol, .article-container.affiliate-article ul {
      max-width: 560px;
      margin: 32px auto; }
    .article-container.affiliate-article ol, .article-container.affiliate-article ul {
      margin-bottom: 64px; }
      .article-container.affiliate-article ol li, .article-container.affiliate-article ul li {
        margin-bottom: 16px; }
    .article-container.affiliate-article img {
      max-width: 820px; }
      .article-container.affiliate-article img.skinny-image {
        max-width: 600px;
        display: block;
        margin: 16px auto; }
    .article-container.affiliate-article .byline img.avatar-small {
      display: inline-block;
      margin: 8px; }
  .article-container.faq-article p {
    margin-top: 8px;
    margin-bottom: 24px; }
  .article-container.faq-article h3 {
    margin-top: 64px;
    font-size: 13pt;
    margin-bottom: 0; }
  .article-container.best-plugins h2 {
    font-size: 28pt;
    border-top: 20px solid #009688;
    margin-top: 150px;
    margin-bottom: 50px;
    padding-top: 50px; }
  .article-container.best-plugins h3 {
    margin-top: 75px;
    font-size: 22pt; }
  .article-container img {
    max-width: 600px;
    width: 100%; }
  .article-container h2 {
    margin-top: 48px; }
  .article-container h3 {
    margin-top: 36px; }
  .article-container a, .article-container a:visited {
    color: #009688;
    text-decoration: underline; }
  .article-container pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    background-color: #28353c;
    color: white;
    padding: 16px;
    border-radius: 8px; }
  .article-container code {
    font-family: monospace;
    font-size: 10pt;
    font-weight: bold; }

.product-overview-container {
  max-width: 1280px;
  margin: 16px auto;
  padding: 8px; }
  .product-overview-container .overview-hero {
    text-align: center; }
    .product-overview-container .overview-hero h1 {
      font-size: 30pt; }
  .product-overview-container .overview-intro {
    max-width: 420px;
    margin: 32px auto; }
  .product-overview-container .overview-what {
    display: flex;
    margin: 48px auto 16px auto;
    justify-content: space-between;
    background: #f1f1f1;
    padding: 36px; }
    .product-overview-container .overview-what h2 {
      margin-top: 16px;
      font-size: 18pt; }
    .product-overview-container .overview-what p {
      font-size: 11pt; }
    .product-overview-container .overview-what .left {
      padding: 36px;
      box-sizing: border-box;
      width: 50%;
      border-right: 1px dashed gainsboro; }
    .product-overview-container .overview-what .right {
      padding: 36px;
      box-sizing: border-box;
      width: 50%; }
  .product-overview-container .skinny-content {
    max-width: 440px;
    margin: 0 auto; }
  .product-overview-container h2 {
    text-align: center;
    font-size: 19pt;
    margin-top: 96px; }
    .product-overview-container h2.overview-benefts {
      font-size: 48pt;
      padding: 96px 16px 16px 16px;
      text-align: left;
      color: #009688;
      border-left: 36px solid #009688;
      border-bottom: 36px solid #009688; }
    .product-overview-container h2.features-heading {
      font-size: 48pt;
      padding: 96px 16px 16px 16px;
      text-align: right;
      color: #009688;
      border-right: 36px solid #009688;
      border-bottom: 36px solid #009688; }
  .product-overview-container .overview-feature-container {
    display: flex;
    flex-wrap: wrap; }
    .product-overview-container .overview-feature-container .overview-feature {
      width: 100%;
      padding: 48px;
      box-sizing: border-box;
      background: #f1f1f1;
      margin: 5%; }
      .product-overview-container .overview-feature-container .overview-feature h3 {
        text-align: center;
        font-size: 24pt; }
      .product-overview-container .overview-feature-container .overview-feature .overview-feature-content {
        display: flex;
        align-items: center; }
      .product-overview-container .overview-feature-container .overview-feature img {
        width: 60%;
        max-width: 600px; }
      .product-overview-container .overview-feature-container .overview-feature .text {
        padding: 16px;
        flex: auto;
        width: 30%;
        max-width: 360px; }
        .product-overview-container .overview-feature-container .overview-feature .text p {
          margin: 16px 4px; }

.articles-page.page-explainer img {
  position: initial;
  height: 72px;
  width: auto;
  margin-right: 16px;
  vertical-align: middle;
  display: inline-block; }

.articles-list .guide img {
  height: 220px;
  object-fit: cover; }

.article-container img {
  margin-top: 24px;
  margin-bottom: 24px; }

.article-container .table-of-contents {
  max-width: 240px;
  background: #e8eef3;
  border: 1px solid #dae4ec;
  border-radius: 4px;
  padding: 8px 16px 16px 16px;
  float: right;
  margin: 64px 32px; }
  .article-container .table-of-contents ul {
    padding: 0;
    margin: 0;
    list-style-type: none; }
  .article-container .table-of-contents li {
    list-style-type: none; }

.article-container.best-template {
  max-width: 860px; }
  .article-container.best-template h1 {
    font-size: 36pt;
    text-align: center;
    margin: 0;
    margin-top: 32px;
    background: white;
    padding: 0; }
  .article-container.best-template h2.hero {
    margin: 0;
    font-size: 28pt;
    text-align: center;
    color: #98a5af;
    font-weight: 400;
    margin-bottom: 64px;
    padding: 0; }
  .article-container.best-template img.best-template-header {
    margin: 0 auto;
    width: 400px;
    display: block; }
  .article-container.best-template .best-template-text {
    max-width: 440px;
    margin: 0 auto; }
  .article-container.best-template .table-of-contents.best-template-toc {
    float: unset;
    max-width: unset;
    padding: 16px 32px;
    line-height: 1.75;
    font-size: 14pt; }
    .article-container.best-template .table-of-contents.best-template-toc h3 {
      text-align: center; }
    .article-container.best-template .table-of-contents.best-template-toc ul {
      display: flex;
      flex-wrap: wrap;
      margin: 32px; }
    .article-container.best-template .table-of-contents.best-template-toc i {
      display: block;
      margin: 16px;
      font-size: 18pt; }
    .article-container.best-template .table-of-contents.best-template-toc a {
      display: flex;
      background: white;
      flex-direction: column;
      text-decoration: none;
      color: #342216;
      width: 180px;
      text-align: center;
      padding: 32px;
      box-sizing: border-box;
      margin: 32px 16px;
      transition: all 0.1s ease;
      border: 2px solid #dae4ec;
      border-radius: 4px; }
      .article-container.best-template .table-of-contents.best-template-toc a:hover, .article-container.best-template .table-of-contents.best-template-toc a:focus {
        outline: none;
        transform: scale(1.05);
        color: #03a87c;
        border: 2px solid #03a87c;
        box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px; }
  .article-container.best-template .best-template-category {
    margin-top: 160px; }
    .article-container.best-template .best-template-category.best-template-category-seo > p {
      max-width: 500px;
      margin: 12px auto; }
    .article-container.best-template .best-template-category.best-template-category-seo > ul {
      max-width: 500px;
      margin: 24px auto; }
      .article-container.best-template .best-template-category.best-template-category-seo > ul li {
        margin: 12px;
        list-style-position: outside;
        list-style-type: disc; }
    .article-container.best-template .best-template-category .theme-entry {
      margin-bottom: 120px;
      border-top: 1px solid #e8eef3;
      padding-top: 60px; }
    .article-container.best-template .best-template-category img {
      max-width: none; }
    .article-container.best-template .best-template-category h2 {
      font-size: 32pt;
      text-align: center; }
    .article-container.best-template .best-template-category h3 {
      font-size: 24pt;
      text-align: center; }
    .article-container.best-template .best-template-category .summary {
      font-size: 16pt;
      max-width: 720px;
      margin: 24px auto 24px auto;
      text-align: center; }
    .article-container.best-template .best-template-category img {
      display: block;
      margin: 0 auto; }
    .article-container.best-template .best-template-category h4 {
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 48px;
      font-size: 11pt; }
    .article-container.best-template .best-template-category ul {
      max-width: 600px;
      margin: 0 auto; }
      .article-container.best-template .best-template-category ul li {
        list-style-type: decimal-leading-zero;
        list-style-position: inside;
        margin-bottom: 24px; }

@media (max-width: 860px) {
  .product-overview-container .overview-what {
    flex-wrap: wrap;
    padding: 16px; }
    .product-overview-container .overview-what .left, .product-overview-container .overview-what .right {
      padding: 4px;
      width: 100%; }
    .product-overview-container .overview-what .left {
      border-right: none; }
  .product-overview-container .overview-feature-container .overview-feature {
    padding: 16px; }
  .product-overview-container .overview-feature-container .overview-feature-content {
    flex-wrap: wrap; }
  .product-overview-container .overview-feature-container .overview-feature img {
    width: 100%; }
  .product-overview-container .overview-feature-container .overview-feature .text {
    width: 100%; } }

.essential-ecommerce-tutorial.article-container {
  max-width: 960px;
  padding-top: 0; }
  .essential-ecommerce-tutorial.article-container img {
    max-width: none; }
  .essential-ecommerce-tutorial.article-container .essential-header {
    position: relative;
    padding: 16px;
    display: flex;
    flex-direction: column; }
    .essential-ecommerce-tutorial.article-container .essential-header .background-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      z-index: -1;
      background: #FBE3E3; }
    .essential-ecommerce-tutorial.article-container .essential-header .essential-header-background {
      margin: 96px 24px;
      background: rgba(255, 255, 255, 0.6);
      text-align: center; }
    .essential-ecommerce-tutorial.article-container .essential-header h1 {
      font-size: 42pt; }
    .essential-ecommerce-tutorial.article-container .essential-header h2 {
      font-weight: 400; }
  .essential-ecommerce-tutorial.article-container .byline {
    margin: 36px auto;
    max-width: 218px;
    border-left: 0; }
  .essential-ecommerce-tutorial.article-container .table-of-contents {
    float: none;
    background-color: white;
    border: none;
    margin: 64px 0;
    line-height: 2;
    columns: 2;
    max-width: none; }
    .essential-ecommerce-tutorial.article-container .table-of-contents p {
      font-size: 16pt; }
    .essential-ecommerce-tutorial.article-container .table-of-contents li {
      position: relative;
      font-size: 14pt; }
      .essential-ecommerce-tutorial.article-container .table-of-contents li a {
        color: #342216;
        display: block;
        text-decoration: none;
        transition: all 0.2s ease;
        padding: 2px 4px 2px 8px;
        border-radius: 4px; }
        .essential-ecommerce-tutorial.article-container .table-of-contents li a:hover {
          background-color: #e8eef3;
          color: #342216;
          font-weight: bold; }
      .essential-ecommerce-tutorial.article-container .table-of-contents li.indent-1 {
        margin-left: 16px;
        font-size: 11pt; }
        .essential-ecommerce-tutorial.article-container .table-of-contents li.indent-1 a {
          color: #5e676e; }
      .essential-ecommerce-tutorial.article-container .table-of-contents li.indent-2 {
        margin-left: 32px;
        font-size: 10pt; }
        .essential-ecommerce-tutorial.article-container .table-of-contents li.indent-2 a {
          color: #98a5af; }
  .essential-ecommerce-tutorial.article-container .article-content .page {
    max-width: 760px;
    margin-top: 96px;
    margin-bottom: 96px; }
  .essential-ecommerce-tutorial.article-container .article-content img {
    margin: 0;
    max-width: 100%; }
    .essential-ecommerce-tutorial.article-container .article-content img.float-left {
      float: left;
      margin-right: 24px; }
    .essential-ecommerce-tutorial.article-container .article-content img.float-right {
      float: right; }
    .essential-ecommerce-tutorial.article-container .article-content img.width-10 {
      width: 10%; }
    .essential-ecommerce-tutorial.article-container .article-content img.width-20 {
      width: 20%; }
    .essential-ecommerce-tutorial.article-container .article-content img.width-30 {
      width: 30%; }
  .essential-ecommerce-tutorial.article-container .article-content .side-by-side {
    display: flex;
    align-items: center;
    margin-top: 64px; }
    .essential-ecommerce-tutorial.article-container .article-content .side-by-side .left img {
      width: 160px; }
    .essential-ecommerce-tutorial.article-container .article-content .side-by-side .right {
      margin-left: 24px; }
  .essential-ecommerce-tutorial.article-container .article-content .pullquote {
    text-align: center;
    font-size: 14pt;
    background-color: #fff0f0;
    border: 4px solid #ffd9d9;
    padding: 16px 8px;
    max-width: 600px;
    margin: 32px auto;
    border-radius: 8px; }
  .essential-ecommerce-tutorial.article-container .pdf-cta {
    font-size: 16pt;
    border: 1px solid #dae4ec;
    padding: 16px;
    background: #e8eef3;
    text-align: center; }
    .essential-ecommerce-tutorial.article-container .pdf-cta a {
      font-weight: bold; }

@media (max-width: 860px) {
  .essential-ecommerce-tutorial.article-container .essential-header .essential-header-background {
    margin: 48px 0 8px 0; }
  .essential-ecommerce-tutorial.article-container .essential-header h1 {
    font-size: 24pt; }
  .essential-ecommerce-tutorial.article-container .essential-header h2 {
    font-size: 18pt; }
  .essential-ecommerce-tutorial.article-container .table-of-contents {
    columns: 1; }
  .essential-ecommerce-tutorial.article-container .article-content img.width-10 {
    float: none;
    width: unset;
    max-width: 100%; }
  .essential-ecommerce-tutorial.article-container .article-content img.width-20 {
    float: none;
    width: unset;
    max-width: 100%; }
  .essential-ecommerce-tutorial.article-container .article-content img.width-30 {
    float: none;
    width: unset;
    max-width: 100%; } }

.byline {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  border-left: 2px solid #009688; }
  .byline div {
    margin-left: 12px;
    flex-direction: column;
    display: flex; }
    .byline div .name {
      font-weight: bold;
      font-size: 1.1em; }
    .byline div .role {
      font-size: 0.9em;
      color: gray; }
  .byline img {
    border-radius: 48px;
    width: 48px;
    height: 48px; }

@media (max-width: 860px) {
  .article-container {
    padding: 8px; }
  .product-overview-container h2.overview-benefts {
    font-size: 32pt;
    border-left: 16px solid #009688;
    border-bottom: 16px solid #009688; }
  .product-overview-container h2.features-heading {
    font-size: 32pt;
    border-right: 16px solid #009688;
    border-bottom: 16px solid #009688; } }

.affiliate-container .affiliate-hero {
  position: relative;
  background: #FBE3E3;
  padding: 0 0 96px 0;
  overflow: hidden; }
  .affiliate-container .affiliate-hero .header {
    margin-bottom: 96px;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0; }
    .affiliate-container .affiliate-hero .header .right-part {
      display: flex;
      align-items: center; }
  .affiliate-container .affiliate-hero .affiliate-hero-text {
    margin-top: 128px; }
    .affiliate-container .affiliate-hero .affiliate-hero-text h1 {
      max-width: 760px;
      font-size: 48pt;
      color: black;
      line-height: 1.2;
      letter-spacing: -1px;
      text-align: center;
      margin: 0 auto; }
    .affiliate-container .affiliate-hero .affiliate-hero-text h2 {
      font-size: 18pt;
      line-height: 1.2;
      max-width: 600px;
      font-weight: 400;
      margin: 16px auto 48px auto;
      text-align: center; }
    .affiliate-container .affiliate-hero .affiliate-hero-text .ss-button {
      display: block;
      margin: 16px auto 96px auto;
      max-width: 120px;
      text-align: center; }
  .affiliate-container .affiliate-hero img.left {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.75;
    pointer-events: none; }
  .affiliate-container .affiliate-hero img.right {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.75;
    pointer-events: none; }

.affiliate-container .affiliate-customers {
  padding: 8px;
  margin-bottom: 64px; }
  .affiliate-container .affiliate-customers .border {
    background-color: #fffefe;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='charlie-brown' fill='%23f2c1c2' fill-opacity='0.4'%3E%3Cpath d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    height: 36px;
    width: 100%;
    display: block; }
    .affiliate-container .affiliate-customers .border:last-child {
      margin-top: 64px; }
  .affiliate-container .affiliate-customers h2 {
    font-size: 36pt;
    margin-bottom: 0;
    margin-top: 72px; }
  .affiliate-container .affiliate-customers p {
    font-size: 16pt;
    max-width: 600px;
    margin: 0 auto; }

.affiliate-container .video-hero {
  background: #FBE3E3;
  padding: 24px 8px 36px 8px;
  margin-top: 200px; }
  .affiliate-container .video-hero .video-hero-inner {
    max-width: 800px;
    padding: 16px;
    margin: 8px auto;
    text-align: center; }
  .affiliate-container .video-hero .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden; }
  .affiliate-container .video-hero .video-container iframe,
  .affiliate-container .video-hero .video-container object,
  .affiliate-container .video-hero .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.affiliate-container .standout-features-container {
  padding: 8px;
  margin-bottom: 160px; }
  .affiliate-container .standout-features-container h2 {
    font-size: 36pt;
    text-align: center;
    max-width: 700px;
    margin: auto;
    line-height: 1.2; }
  .affiliate-container .standout-features-container .standout-features {
    max-width: 1200px;
    margin: 36px auto;
    display: flex;
    justify-content: space-around; }
    .affiliate-container .standout-features-container .standout-features .feature {
      margin: 16px;
      padding: 16px;
      text-align: center;
      font-size: 14pt; }
      .affiliate-container .standout-features-container .standout-features .feature img {
        height: 140px;
        margin-bottom: 18px; }

.affiliate-container .pricing-contact-us {
  max-width: 460px;
  padding-left: 8px;
  padding-right: 8px;
  margin: 48px auto 0 auto;
  text-align: center;
  color: gray;
  border: 1px solid gainsboro;
  border-radius: 8px; }

.affiliate-container .affiliate-pricing {
  display: flex;
  margin: 48px auto 160px auto; }
  .affiliate-container .affiliate-pricing .plan {
    flex: 2;
    box-sizing: border-box;
    border-right: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    padding-top: 16px;
    padding: 64px 16px 36px 16px; }
    .affiliate-container .affiliate-pricing .plan:first-child {
      border-left: 1px solid #eaeaea; }
    .affiliate-container .affiliate-pricing .plan:last-child {
      flex: 1;
      text-align: center; }
      .affiliate-container .affiliate-pricing .plan:last-child h3, .affiliate-container .affiliate-pricing .plan:last-child img, .affiliate-container .affiliate-pricing .plan:last-child .price-label, .affiliate-container .affiliate-pricing .plan:last-child .ss-button {
        margin: 8px; }
      .affiliate-container .affiliate-pricing .plan:last-child p {
        padding: 8px 8px 16px 8px; }
    .affiliate-container .affiliate-pricing .plan h3 {
      font-size: 32pt;
      margin-bottom: 0;
      margin-top: 0;
      margin-left: 32px; }
    .affiliate-container .affiliate-pricing .plan img {
      margin-left: 32px;
      height: 120px; }
    .affiliate-container .affiliate-pricing .plan .plan-features {
      border-top: 2px solid #eaeaea;
      margin-top: 48px;
      padding-top: 16px; }
      .affiliate-container .affiliate-pricing .plan .plan-features p {
        padding-left: 8px; }
      .affiliate-container .affiliate-pricing .plan .plan-features i {
        display: inline-block;
        width: 30px;
        color: white;
        background: #03a87c;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        text-align: center;
        margin-right: 10px; }
        .affiliate-container .affiliate-pricing .plan .plan-features i.fa-tags {
          font-size: 8pt; }
    .affiliate-container .affiliate-pricing .plan .plan-features-business p {
      padding: 16px 8px 24px 8px; }
    .affiliate-container .affiliate-pricing .plan .most-popular {
      background: -webkit-linear-gradient(top, #FFC107, #ff9901);
      display: inline-block;
      border-radius: 10px;
      padding: 5px 15px;
      font-weight: 800;
      color: white;
      margin-bottom: 24px;
      font-size: 11pt; }
    .affiliate-container .affiliate-pricing .plan p {
      border-bottom: 1px solid #eaeaea;
      padding-bottom: 15px;
      font-size: 11pt; }
    .affiliate-container .affiliate-pricing .plan .price-label {
      font-size: 20pt;
      font-weight: 800;
      margin-left: 32px; }
      .affiliate-container .affiliate-pricing .plan .price-label .time {
        font-size: 16pt;
        color: gray;
        font-weight: 600; }
      .affiliate-container .affiliate-pricing .plan .price-label .no-commission {
        display: block;
        color: gray;
        font-size: 10pt;
        font-weight: 600; }
    .affiliate-container .affiliate-pricing .plan .ss-button {
      margin-top: 24px;
      display: inline-block;
      margin-left: 32px; }
    .affiliate-container .affiliate-pricing .plan .trial-plan {
      display: inline-block;
      border: none;
      vertical-align: middle;
      padding: 8px;
      color: gray; }

.affiliate-container .features .left .integrations-content {
  margin-top: 8px; }

.affiliate-container .features .left .integrations-content img.paypal {
  margin-top: 32px;
  margin-bottom: 4px;
  height: 30px; }

.affiliate-container .affiliate-learn-more {
  max-width: 960px;
  margin: 64px auto;
  text-align: center; }
  .affiliate-container .affiliate-learn-more h2 {
    font-size: 24pt;
    text-align: center; }
  .affiliate-container .affiliate-learn-more .learn-more-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    .affiliate-container .affiliate-learn-more .learn-more-gallery a, .affiliate-container .affiliate-learn-more .learn-more-gallery a:visited {
      flex: 1;
      color: #5d5c5c;
      text-align: center;
      margin: 8px;
      text-decoration: none;
      max-width: 200px;
      min-width: 160px;
      border: 1px solid #eaeaea;
      border-radius: 4px;
      transition: all 0.2s ease; }
      .affiliate-container .affiliate-learn-more .learn-more-gallery a:hover, .affiliate-container .affiliate-learn-more .learn-more-gallery a:visited:hover {
        color: #2d2d2d;
        box-shadow: 0px 1px 2px 0px rgba(127, 127, 127, 0.1);
        cursor: pointer;
        transform: scale(1.025); }
      .affiliate-container .affiliate-learn-more .learn-more-gallery a .guide, .affiliate-container .affiliate-learn-more .learn-more-gallery a:visited .guide {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden; }
      .affiliate-container .affiliate-learn-more .learn-more-gallery a img, .affiliate-container .affiliate-learn-more .learn-more-gallery a:visited img {
        height: 120px;
        width: 100%;
        object-fit: cover;
        border-radius: 4px 4px 0 0;
        margin: auto; }
      .affiliate-container .affiliate-learn-more .learn-more-gallery a p, .affiliate-container .affiliate-learn-more .learn-more-gallery a:visited p {
        padding: 8px;
        margin: 8px auto auto auto; }

.affiliate-container .who-are-we {
  margin: 196px auto;
  padding: 16px;
  text-align: center;
  position: relative; }
  .affiliate-container .who-are-we .background-image {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden; }
    .affiliate-container .who-are-we .background-image img {
      object-fit: cover;
      object-position: center;
      width: 100%;
      height: 100%; }
  .affiliate-container .who-are-we .inner {
    max-width: 560px;
    margin: 96px auto;
    background: white;
    padding: 24px 36px; }
  .affiliate-container .who-are-we h2 {
    font-size: 32pt;
    margin-bottom: 0;
    margin-top: 0; }

@media (max-width: 860px) {
  .affiliate-container .affiliate-hero {
    flex-direction: column;
    background: #FBE3E3;
    padding-bottom: 36px; }
    .affiliate-container .affiliate-hero img.left, .affiliate-container .affiliate-hero img.right {
      display: none; }
    .affiliate-container .affiliate-hero .header {
      margin-bottom: 36px; }
    .affiliate-container .affiliate-hero .affiliate-hero-text {
      text-align: center;
      margin: 0;
      padding: 8px;
      margin-top: 0; }
      .affiliate-container .affiliate-hero .affiliate-hero-text h1 {
        font-size: 32pt;
        margin-top: 36px; }
      .affiliate-container .affiliate-hero .affiliate-hero-text h2 {
        margin: 32px auto;
        font-size: 16pt; }
    .affiliate-container .affiliate-hero .affiliate-hero-image {
      padding: 0;
      height: 240px;
      width: 100%;
      text-align: center;
      background: white; }
      .affiliate-container .affiliate-hero .affiliate-hero-image img {
        border: none;
        width: 145%;
        height: 100%;
        margin-left: -45%;
        max-width: unset; }
  .affiliate-container .affiliate-customers h2 {
    font-size: 22pt;
    line-height: 1.2;
    margin-bottom: 24px; }
  .affiliate-container .standout-features-container h2 {
    font-size: 22pt; }
  .affiliate-container .standout-features-container .standout-features {
    flex-direction: column; }
  .affiliate-container .affiliate-pricing {
    flex-direction: column;
    padding: 8px; }
  .affiliate-container .features {
    padding: 0; } }

.header {
  padding: 12px 24px;
  display: flex;
  justify-content: space-between; }
  .header .right-part {
    padding-top: 4px; }
    .header .right-part a {
      margin-right: 24px;
      font-weight: normal;
      text-decoration: none; }
      .header .right-part a:hover, .header .right-part a:focus {
        text-decoration: underline; }
      .header .right-part a.ss-button {
        margin: 0;
        font-weight: 600;
        padding: 10px 24px 8px 24px; }
        .header .right-part a.ss-button:hover, .header .right-part a.ss-button:focus {
          text-decoration: none; }
      .header .right-part a.ss-button-alt {
        background: #ef898e; }
  .header a {
    color: #342216;
    font-weight: bold;
    transition: all 0.1s ease;
    display: inline-block; }
    .header a:hover {
      transform: scale(1.025); }
  .header .home-link {
    text-decoration: none;
    line-height: 24px;
    margin-top: -4px; }
    .header .home-link img {
      display: inline-block;
      width: 24px;
      height: 24px;
      vertical-align: middle;
      margin-top: 3px; }
    .header .home-link span {
      display: inline-block;
      vertical-align: middle;
      font-size: 12pt;
      margin-top: 10px; }

.dropdown {
  position: relative;
  display: inline-block; }
  .dropdown.active .title-link,
  .dropdown:hover .title-link {
    text-decoration: underline;
    transform: scale(1.025); }
  .dropdown.active .dropdown-menu,
  .dropdown:hover .dropdown-menu,
  .dropdown .dropdown-menu:hover {
    display: flex;
    flex-direction: column; }
  .dropdown .dropdown-menu {
    box-sizing: border-box;
    width: 360px;
    left: -140px;
    display: none;
    position: absolute;
    border-radius: 8px;
    background: white;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-property: all;
    z-index: 1000;
    box-shadow: 5px 15px 62px 0px rgba(0, 0, 0, 0.31);
    overflow: hidden; }
    .dropdown .dropdown-menu a {
      display: flex;
      align-items: center;
      padding: 16px 24px 16px 16px;
      margin: 0;
      transition: all 0.2s ease; }
      .dropdown .dropdown-menu a:hover, .dropdown .dropdown-menu a:focus {
        background-color: #f9edec;
        transform: none;
        text-decoration: none; }
        .dropdown .dropdown-menu a:hover span:nth-child(2), .dropdown .dropdown-menu a:focus span:nth-child(2) {
          color: #342216; }
      .dropdown .dropdown-menu a:first-child {
        border-radius: 8px 8px 0 0; }
      .dropdown .dropdown-menu a:last-child {
        border-radius: 0 0 8px 8px; }
      .dropdown .dropdown-menu a img {
        height: 48px;
        margin-right: 16px;
        width: 48px; }
      .dropdown .dropdown-menu a div {
        display: flex;
        flex-direction: column; }
        .dropdown .dropdown-menu a div span:first-child {
          font-weight: bold;
          font-size: 13pt; }
        .dropdown .dropdown-menu a div span:nth-child(2) {
          font-size: 11pt;
          color: gray;
          transition: all 0.2s ease; }
      .dropdown .dropdown-menu a.smaller-item {
        padding: 12px 16px; }
        .dropdown .dropdown-menu a.smaller-item.with-border {
          border-top: 1px solid #eaeaea; }
        .dropdown .dropdown-menu a.smaller-item img {
          width: 36px;
          height: 36px;
          margin-right: 8px; }
        .dropdown .dropdown-menu a.smaller-item div span:first-child {
          font-weight: 600;
          font-size: 11pt; }

@media (max-width: 860px) {
  .header .home-link span {
    display: none; }
  .header {
    align-items: center;
    padding: 8px 2px; }
  .header .right-part {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-left: 16px;
    flex: 1; }
    .header .right-part a {
      text-align: center;
      margin-top: auto;
      margin-bottom: auto;
      padding: 4px;
      flex: 1; }
      .header .right-part a.hide-narrow {
        display: none; }
  .dropdown {
    position: relative;
    display: inline-block;
    flex: 1; }
    .dropdown:hover .dropdown-menu,
    .dropdown .dropdown-menu:hover {
      display: none; }
    .dropdown.active {
      display: block;
      width: 100%;
      flex: none; }
    .dropdown.active .dropdown-menu {
      display: flex;
      flex-direction: column;
      left: 0;
      right: 0;
      position: relative;
      margin-bottom: 22px;
      box-shadow: none;
      border-radius: 0;
      margin-right: 0;
      width: 100%; }
    .dropdown .dropdown-menu a {
      text-align: left;
      padding: 16px;
      margin-right: 0; } }

.about-container .about-2side {
  display: flex;
  justify-content: space-between;
  overflow: hidden; }
  .about-container .about-2side .inner {
    max-width: 720px;
    margin: auto;
    padding: 16px; }
    @media (max-width: 860px) {
      .about-container .about-2side .inner {
        padding: 64px 16px; } }
    .about-container .about-2side .inner h1 {
      font-size: 64pt;
      margin: 0;
      line-height: 1; }
      @media (max-width: 860px) {
        .about-container .about-2side .inner h1 {
          font-size: 42pt;
          text-align: center; } }
    .about-container .about-2side .inner h2 {
      margin: 32px 0 0 0;
      font-size: 24pt;
      line-height: 1.2; }
      @media (max-width: 860px) {
        .about-container .about-2side .inner h2 {
          font-size: 16pt; } }
  .about-container .about-2side a, .about-container .about-2side a:visited {
    color: inherit; }
  .about-container .about-2side img {
    height: 80vh; }
    @media (max-width: 860px) {
      .about-container .about-2side img {
        display: none; } }

.about-container .about-hero {
  background: #c9f1fc; }

.about-container .about-copy {
  margin-top: 96px; }

.about-container .about-arch {
  margin-top: 160px;
  display: flex;
  align-items: center;
  flex-wrap: wrap; }
  @media (max-width: 860px) {
    .about-container .about-arch {
      flex-direction: column;
      text-align: left; } }
  .about-container .about-arch .left {
    flex: 1;
    text-align: right;
    padding: 16px;
    margin: auto; }
    @media (max-width: 860px) {
      .about-container .about-arch .left {
        text-align: left; } }
    .about-container .about-arch .left img {
      width: 100px;
      height: 100px;
      float: left;
      margin: 0 8px;
      border-radius: 50%; }
      @media (max-width: 860px) {
        .about-container .about-arch .left img {
          float: right;
          width: 75px;
          height: 75px; } }
  .about-container .about-arch .right {
    flex: 1;
    padding: 16px;
    margin: auto; }
    .about-container .about-arch .right p {
      margin-bottom: 32px; }
  @media (max-width: 860px) {
    .about-container .about-arch .left, .about-container .about-arch .right {
      padding: 0 16px; } }
  .about-container .about-arch .middle {
    flex: 1;
    text-align: center; }
    .about-container .about-arch .middle img {
      height: 60vh;
      border-radius: 50% 50% 0 0; }
      @media (max-width: 860px) {
        .about-container .about-arch .middle img {
          display: none; } }

.about-container .about-josie .inner img {
  width: 100px;
  height: 100px;
  vertical-align: middle;
  margin: 0 8px;
  border-radius: 50%; }
  @media (max-width: 860px) {
    .about-container .about-josie .inner img {
      display: inline-block; } }

.about-container .about-josie .inner p:last-child {
  margin-top: 32px; }

.about-container .about-josie .ss-button.ss-button-alt:visited {
  color: white; }

.peachs-affiliate-program-container .peachs-ap-hero {
  background: #ffe2e2;
  padding: 64px 16px 128px 16px; }
  .peachs-affiliate-program-container .peachs-ap-hero .inner {
    line-height: 1.1;
    max-width: 600px;
    margin: 0 auto; }
    .peachs-affiliate-program-container .peachs-ap-hero .inner h1 {
      font-size: 48pt; }
    .peachs-affiliate-program-container .peachs-ap-hero .inner h2 {
      font-size: 24pt; }
    .peachs-affiliate-program-container .peachs-ap-hero .inner p {
      margin-top: 48px; }

.peachs-affiliate-program-container .peachs-ap-info {
  max-width: 600px;
  margin: 64px auto;
  padding: 8px; }
  .peachs-affiliate-program-container .peachs-ap-info .sign-up-link {
    margin: 48px 0; }