1.plan {
2  border-radius: 16px;
3  box-shadow: 0 30px 30px -25px rgba(0, 38, 255, 0.205);
4  padding: 10px;
5  background-color: #fff;
6  color: #697e91;
7  max-width: 300px;
8}
9
10.plan strong {
11  font-weight: 600;
12  color: #425275;
13}
14
15.plan .inner {
16  align-items: center;
17  padding: 20px;
18  padding-top: 40px;
19  background-color: #ecf0ff;
20  border-radius: 12px;
21  position: relative;
22}
23
24.plan .pricing {
25  position: absolute;
26  top: 0;
27  right: 0;
28  background-color: #bed6fb;
29  border-radius: 99em 0 0 99em;
30  display: flex;
31  align-items: center;
32  padding: 0.625em 0.75em;
33  font-size: 1.25rem;
34  font-weight: 600;
35  color: #425475;
36}
37
38.plan .pricing small {
39  color: #707a91;
40  font-size: 0.75em;
41  margin-left: 0.25em;
42}
43
44.plan .title {
45  font-weight: 600;
46  font-size: 1.25rem;
47  color: #425675;
48}
49
50.plan .title + * {
51  margin-top: 0.75rem;
52}
53
54.plan .info + * {
55  margin-top: 1rem;
56}
57
58.plan .features {
59  display: flex;
60  flex-direction: column;
61}
62
63.plan .features li {
64  display: flex;
65  align-items: center;
66  gap: 0.5rem;
67}
68
69.plan .features li + * {
70  margin-top: 0.75rem;
71}
72
73.plan .features .icon {
74  background-color: #1FCAC5;
75  display: inline-flex;
76  align-items: center;
77  justify-content: center;
78  color: #fff;
79  border-radius: 50%;
80  width: 20px;
81  height: 20px;
82}
83
84.plan .features .icon svg {
85  width: 14px;
86  height: 14px;
87}
88
89.plan .features + * {
90  margin-top: 1.25rem;
91}
92
93.plan .action {
94  width: 100%;
95  display: flex;
96  align-items: center;
97  justify-content: end;
98}
99
100.plan .button {
101  background-color: #6558d3;
102  border-radius: 6px;
103  color: #fff;
104  font-weight: 500;
105  font-size: 1.125rem;
106  text-align: center;
107  border: 0;
108  outline: 0;
109  width: 100%;
110  padding: 0.625em 0.75em;
111  text-decoration: none;
112}
113
114.plan .button:hover, .plan .button:focus {
115  background-color: #4133B7;
116}