DataScope26/WEB

1.pricing-page {2  min-height: 100vh;3  background-color: var(--bg);4  padding: 4rem 1.5rem;5  margin-top: 5%;6  font-family: -apple-system, BlinkMacSystemFont, var(--font-body), Roboto, Helvetica, Arial, sans-serif;7  color: var(--color-text);8}9 10.pricing-container {11  max-width: 62.5rem;12  margin: 0 auto;13}14 15.pricing-title {16  color: var(--color-text);17  font-size: 3rem;18  font-weight: 800;19  text-align: center;20  margin: 0 0 3rem 0;21}22 23.plans-grid {24  display: flex;25  flex-wrap: wrap;26  gap: 1.25rem;27  margin-bottom: 2rem;28}29 30.plans-grid--current {31  margin-bottom: 3rem;32}33 34.plans-grid--other {35  margin-bottom: 2rem;36}37 38.pricing-other-plans-title {39  color: var(--white);40  font-size: 1.5rem;41  font-weight: 700;42  margin: 0 0 1.5rem 0;43  text-transform: uppercase;44  letter-spacing: 0.0313rem;45}46 47.plan-card {48  flex: 1;49  min-width: 16.25rem;50  display: flex;51  flex-direction: column;52  background-color: var(--surface);53  border: 0.0625rem solid var(--color-border);54  border-radius: 0.75rem;55  padding: 1.5rem;56  box-shadow: 0 0.875rem 2.5rem rgba(0,0,0,0.12);57  position: relative;58}59 60.plan-card--current {61  background: linear-gradient(135deg, var(--green-20) 0%, var(--green-20) 100%);62  border-color: var(--green);63  box-shadow: 0 0.875rem 2.5rem rgba(46, 232, 138, 0.08);64}65 66.plan-card--full-width {67  flex: 1 1 100%;68  min-width: unset;69}70 71.plan-card__badge {72  position: absolute;73  top: 1rem;74  right: 1rem;75  background-color: var(--green);76  color: var(--cta-text);77  padding: 0.375rem 0.75rem;78  border-radius: 1.25rem;79  font-size: 0.75rem;80  font-weight: 600;81  letter-spacing: 0.0313rem;82}83 84.plan-name {85  color: var(--color-text);86  font-size: 1rem;87  font-weight: 700;88  margin: 0 0 1rem 0;89}90 91.plan-price {92  margin-bottom: 1.25rem;93}94 95.plan-price-amount {96  color: var(--color-text);97  font-size: 2.25rem;98  font-weight: 800;99  letter-spacing: -0.02em;100}101 102.plan-price-period {103  color: var(--muted);104  font-size: 1rem;105  font-weight: 500;106  margin-left: 0.125rem;107}108 109.plan-button {110  font-size: 0.9375rem;111  padding: 0.625rem 0;112  margin-bottom: 1.5rem;113}114 115.plan-button--change {116  background-color: transparent;117  border: 0.125rem solid var(--green);118  color: var(--green);119  cursor: pointer;120  font-weight: 600;121  transition: all 0.2s ease;122}123 124.plan-button--change:hover {125  background-color: var(--green);126  color: var(--black);127}128 129.plan-features {130  list-style: none;131  margin: 0;132  padding: 0;133  display: flex;134  flex-direction: column;135  gap: 0.625rem;136}137 138.plan-feature-item {139  display: flex;140  align-items: flex-start;141  gap: 0.5rem;142  color: var(--muted);143  font-size: 0.875rem;144}145 146.plan-feature-check {147  color: var(--green);148  font-size: 0.75rem;149  font-weight: 700;150  line-height: 1.4;151  flex-shrink: 0;152}153 154.pricing-contact {155  background-color: var(--surface);156  border: 0.0625rem solid var(--color-border);157  border-radius: 1rem;158  padding: 2rem 1.5rem;159  text-align: center;160}161 162.pricing-contact-title {163  color: var(--color-text);164  font-size: 1.125rem;165  font-weight: 700;166  margin: 0 0 0.5rem 0;167}168 169.pricing-contact-subtitle {170  color: var(--green);171  font-size: 0.9375rem;172  font-weight: 500;173  margin: 0;174}175 176@media (max-width: 48rem) {177  .plans-grid {178    flex-direction: column;179  }180 181  .pricing-title {182    font-size: 2.25rem;183  }184}