html {
  scroll-behavior: smooth; }

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

@keyframes order-notifications-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(-20px); } }

.order-notifications-container {
  color: #342216;
  position: relative; }
  .order-notifications-container a, .order-notifications-container a:visited {
    color: #342216; }
  .order-notifications-container .header > a, .order-notifications-container .header > a:visited, .order-notifications-container .header .right-part > a, .order-notifications-container .header .right-part > a:visited, .order-notifications-container .header .title-link, .order-notifications-container .header .title-link:visited {
    font-weight: 600;
    color: white;
    text-decoration: none;
    margin: 8px; }
  .order-notifications-container .order-notifications-hero {
    position: relative; }
    .order-notifications-container .order-notifications-hero .hero-background {
      z-index: -1;
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      -webkit-transform: skewY(6deg);
      transform: skewY(6deg);
      -webkit-transform-origin: 0;
      transform-origin: 100%;
      background: linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%); }
    .order-notifications-container .order-notifications-hero .hero-content {
      padding: 48px 16px 180px 16px;
      color: white;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      text-align: center; }
      .order-notifications-container .order-notifications-hero .hero-content .hero-header {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; }
      .order-notifications-container .order-notifications-hero .hero-content h1 {
        font-size: 64pt;
        margin: 0 24px; }
      .order-notifications-container .order-notifications-hero .hero-content h2 {
        max-width: 540px;
        margin: 24px auto; }
      .order-notifications-container .order-notifications-hero .hero-content h3 {
        max-width: 700px;
        margin: 36px auto;
        font-weight: normal; }
      .order-notifications-container .order-notifications-hero .hero-content .highlight {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        padding: 4px; }
      .order-notifications-container .order-notifications-hero .hero-content .checkmark-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center; }
      .order-notifications-container .order-notifications-hero .hero-content .ss-button, .order-notifications-container .order-notifications-hero .hero-content a:visited {
        margin: 48px auto 0 auto;
        max-width: 160px;
        display: block;
        color: white; }
  .order-notifications-container .order-notifications-pricing .plan-usage-text {
    color: gray;
    font-size: 11pt;
    text-align: center; }
  .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid {
    display: flex;
    flex-wrap: wrap; }
    .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 48px 16px;
      text-align: center;
      margin: 8px;
      border-radius: 8px;
      box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px;
      min-width: 200px; }
      .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid .item a, .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid .item a:visited {
        color: white;
        border-radius: 16px;
        box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px; }
        .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid .item a.small-business, .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid .item a:visited.small-business {
          background: #2196F3; }
        .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid .item a.high-traffic, .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid .item a:visited.high-traffic {
          background: #009688; }
      .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid .item img {
        height: 100px; }
      .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid .item ul {
        text-align: left;
        color: gray;
        font-size: 11pt;
        margin-bottom: 40px;
        list-style: none; }
      .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid .item ul li i {
        display: inline-block;
        margin-right: 8px;
        color: #03a87c; }
      .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid .item .amount {
        font-size: 24pt;
        font-weight: bold; }
      .order-notifications-container .order-notifications-pricing .order-notifications-pricing-grid .item .unit {
        font-size: 12pt;
        font-weight: normal;
        color: gray; }
  .order-notifications-container .social-proof {
    max-width: 860px;
    margin: 96px auto;
    padding: 8px; }
    .order-notifications-container .social-proof h2 {
      font-size: 28pt; }
    .order-notifications-container .social-proof .order-notifications-x-up {
      margin-top: 48px; }
      .order-notifications-container .social-proof .order-notifications-x-up .item {
        padding: 48px 16px;
        border-radius: 8px;
        margin: 16px;
        box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px; }
        .order-notifications-container .social-proof .order-notifications-x-up .item img {
          height: 64px;
          max-width: 120px; }
  .order-notifications-container .order-notifications-benefits {
    text-align: center;
    margin: 160px auto;
    max-width: 720px; }
    .order-notifications-container .order-notifications-benefits h2 {
      font-size: 28pt; }
    .order-notifications-container .order-notifications-benefits .side-item {
      text-align: left; }
  .order-notifications-container .order-notifications-x-up {
    display: flex;
    flex-wrap: wrap; }
    .order-notifications-container .order-notifications-x-up .item {
      text-align: center;
      flex: 1;
      min-width: 200px;
      box-sizing: border-box;
      padding: 16px; }
  .order-notifications-container .side-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
    .order-notifications-container .side-item.reverse {
      flex-direction: row-reverse; }
    .order-notifications-container .side-item .accessory {
      flex: 1; }
      .order-notifications-container .side-item .accessory img {
        width: 100%; }
    .order-notifications-container .side-item .main {
      flex: 4;
      margin: 16px;
      padding: 8px; }
  .order-notifications-container .unique-features {
    margin: 160px auto;
    max-width: 820px; }
    .order-notifications-container .unique-features h2 {
      font-size: 28pt;
      text-align: center; }
    .order-notifications-container .unique-features .order-notifications-x-up {
      align-items: center; }
      .order-notifications-container .unique-features .order-notifications-x-up .item {
        text-align: left; }
        .order-notifications-container .unique-features .order-notifications-x-up .item img {
          width: 100%; }
    .order-notifications-container .unique-features i {
      display: inline-block;
      margin-left: 16px;
      margin-right: 8px;
      color: #03a87c; }
  .order-notifications-container .guarantee {
    padding: 8px;
    max-width: 720px;
    margin: 120px auto; }
    .order-notifications-container .guarantee .order-notifications-x-up {
      align-items: center; }
      .order-notifications-container .guarantee .order-notifications-x-up .item {
        text-align: left; }
        .order-notifications-container .guarantee .order-notifications-x-up .item img {
          width: 240px; }
  .order-notifications-container #fixed-arrow {
    position: fixed;
    bottom: 170px;
    left: 16px;
    opacity: 0;
    animation: order-notifications-slide-down 0.5s ease 1.5s forwards;
    display: flex;
    align-items: center; }
    .order-notifications-container #fixed-arrow.fade-out {
      animation: order-notifications-fade-out 0.5s ease forwards; }
    .order-notifications-container #fixed-arrow span {
      font-size: 10pt;
      padding: 8px 16px;
      font-weight: bold; }
  .order-notifications-container #checkmark {
    width: 120px;
    height: 120px; }
  .order-notifications-container #checkmark path {
    stroke: #d1ffd6;
    stroke-width: 4px;
    stroke-dasharray: 1448.1546630859375;
    stroke-dashoffset: -1448.1546630859375;
    fill: transparent;
    transition: stroke-dashoffset 0.8s linear 0.4s,fill 0.4s ease; }
  .order-notifications-container #checkmark path.checked {
    fill: #14ef69;
    stroke-dashoffset: 0px;
    transition: stroke-dashoffset 0.8s linear,fill 0.4s ease 0.8s; }

.squaretask-container {
  padding: 8px; }
  .squaretask-container .squaretask-header {
    display: flex;
    padding: 8px 8px 0 8px;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999; }
    .squaretask-container .squaretask-header a, .squaretask-container .squaretask-header a:visited {
      font-weight: 600;
      color: black;
      text-decoration: none;
      margin: 8px; }
    .squaretask-container .squaretask-header .home-link {
      margin: 0 8px;
      text-decoration: none;
      line-height: 24px; }
      .squaretask-container .squaretask-header .home-link img {
        display: inline-block;
        width: 24px;
        height: 24px;
        vertical-align: middle;
        margin-top: 3px; }
      .squaretask-container .squaretask-header .home-link span {
        display: inline-block;
        vertical-align: middle;
        font-size: 12pt;
        margin-top: 10px; }
  .squaretask-container .squaretask-hero {
    max-width: 760px;
    margin: 0 auto; }
    .squaretask-container .squaretask-hero img {
      max-width: 100%;
      border-radius: 32px 32px 0 0;
      margin-top: 48px; }
  .squaretask-container .squaretask-lead {
    max-width: 600px;
    margin: 64px auto;
    font-size: 14pt;
    text-align: center; }
    .squaretask-container .squaretask-lead span {
      background: #39b54a;
      color: white;
      padding: 4px 8px;
      border-radius: 8px;
      margin: 0 4px;
      display: inline-block; }
    .squaretask-container .squaretask-lead .larger {
      font-weight: 700;
      font-size: 28pt; }
  .squaretask-container .squaretask-icons {
    display: flex;
    justify-content: space-evenly;
    max-width: 600px;
    margin: 36px auto; }
    .squaretask-container .squaretask-icons img {
      height: 60px; }
  .squaretask-container .squaretask-number {
    max-width: 600px;
    margin: 96px auto;
    font-size: 16pt;
    text-align: center;
    padding-top: 48px;
    padding-bottom: 48px;
    border-top: 4px solid #f1f1f1;
    border-bottom: 4px solid #f1f1f1; }
    .squaretask-container .squaretask-number span {
      line-height: 1;
      font-size: 64pt;
      font-weight: 700; }
  .squaretask-container .squaretask-list {
    max-width: 600px;
    font-size: 14pt;
    margin: 96px auto; }
    .squaretask-container .squaretask-list ul {
      padding-left: 24px; }
      .squaretask-container .squaretask-list ul li {
        list-style: none; }
      .squaretask-container .squaretask-list ul i {
        margin-right: 16px;
        color: #39b54a; }
  .squaretask-container .squaretask-guarantee {
    max-width: 600px;
    margin: 96px auto;
    text-align: center;
    background: #f6f6f6;
    padding: 36px 16px;
    border-radius: 32px; }
    .squaretask-container .squaretask-guarantee img {
      height: 140px; }
  .squaretask-container .squaretask-request {
    max-width: 600px;
    margin: 160px auto 96px auto;
    font-size: 14pt; }
    .squaretask-container .squaretask-request img {
      height: 80px; }
    .squaretask-container .squaretask-request .squaretask-template {
      background: #f1f1f1;
      padding: 32px;
      border-radius: 16px;
      margin: 32px 0 96px 0; }