#pricing.page {
  padding: 0px;
  & > .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px 32px;
    margin: 24px;
    box-sizing: border-box;
    gap: 32px;
    background: #d8eaff;
    border-radius: 24px;
    width: calc(100% - 48px);
    & > .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      & > p.light {
        color: #002e58;
        font-size: 20px;
        font-weight: 400;
      }
      & > h2 {
        font-size: 32px;
        font-weight: 700;
      }
    }
    & > .plans{
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0px;
      gap: 1px;
      width: 100%;
      max-width: 1198px;
      background: linear-gradient(180deg, #868686 6px, #acbbcc 6.1px);
      padding: 0px 1px 1px 1px;
      border-radius: 8px;
      overflow: hidden;
      & > .plan{
        --planAccent: #226AFF;
        flex: 1;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        gap: 16px;
        background: #FFFFFF;
        border-top: 6px solid var(--planAccent);
        & > .planHeader{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 4px;
          width: calc(100% + 48px);
          margin-left: -24px;
          margin-top: -6px;
          padding-bottom: 16px;
          border-bottom: solid 1px #acbbcc;
          & > p{
            font-weight: 700;
            font-size: 16px;
            line-height: 19px;
            color: #000000;
          }
          & > p.light{
            font-weight: 400;
            font-size: 24px;
            line-height: 29px;
            color: rgba(0, 0, 0, 0.85);
            letter-spacing: -0.5px;
          }
        }
        & > .features{
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          & > .feature{
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 8px 0px;
            gap: 16px;
            & > .text{
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              padding: 0px 16px 0px 0px;
              gap: 4px;
              height: 40px;
              & > p.bold{
                font-weight: 700;
                font-size: 14px;
                color: #484848;
              }
              & > p.light{
                color: #000000;
                font-weight: 400;
                font-size: 16px;
                line-height: 19px;
              }
            }
            & > div:first-child{
              width: 16px;
              height: 16px;
              border-radius: 100px;
              box-sizing: border-box;
            }
            & > .red{
              background-color: #FF2222;
            }
            & > .yellow{
              background-color: #FFB800;
            }
            & > .green{
              background-color: #009317;
            }
            & > .none{
              background: none;
              border: 3px solid #848484;
            }
          }
        }
        & > button{
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0px;
          height: 40px;
          background: var(--planAccent);
          color: white;
          width: 100%;
          font-weight: 400;
          font-size: 16px;
          letter-spacing: 0.2px;
          border-radius: 90px;
        }
      }
      & > .plan.blue{
        --planAccent: #226AFF;}
      & > .plan.red{
        --planAccent: #FF2222;
        & button::after{
          mix-blend-mode: normal;
        }
        & button:hover{
          --overOpacity: 0.5;
        }
      }
      & > .plan.green{
        --planAccent: #009317;}
      & > .plan.yellow{
        --planAccent: #FF9700;}

      & > .plan:last-child{
        border-bottom-right-radius: 7px;
      }
      & > .plan:first-child{
        border-bottom-left-radius: 7px;
      }
    }
  }
}