@import "variables-pc.css";
.section-content {
    display: flex;
    flex-flow: row;
     gap: var(--spacing-8);
}

.section-content .card {
    display: flex;
    flex-flow: column;
   background: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--border-radius-3xl);
    padding: var(--spacing-20) var(--spacing-16);
    position: relative;
}

.section-content .card:hover {
    outline: var(--border-width-thin) solid #859eff;
    outline-offset: -1px;
}

.section-content .card-header {
    display: flex;
    flex-flow: column;
    gap: var(--spacing-8);
}

.section-content .card-title {
color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-5xl);
}

.section-content .card-subtitle {
  color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-3xl);
}

.btn-group {
    display: flex;
    flex-flow: column;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-12);
}
.card-body {
   margin-top: var(--spacing-16);
}
.card-body .primary-btn {
    color: var(--color-text-primary);
    text-align: justify;
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    font-size: var(--font-size-2xl);
    padding: var(--spacing-5) var(--spacing-16) var(--spacing-5) var(--spacing-8);
    border-radius: var(--border-radius-lg);
    letter-spacing: var(--letter-spacing-tight);
}

.card-body .primary-btn.left {
    background: #fff url("../images/icon/arrow-right-dark.svg") no-repeat;
    background-position-x: 92.5%;
    background-position-y: center;
      border: var(--border-width-thin) solid var(--color-border-medium);
}

.card-body .primary-btn.center {
    background: #d4d5d9 url("../images/icon/arrow-right-dark.svg") no-repeat;
    background-position-x: 92.5%;
    background-position-y: center;
    border: var(--border-width-thin) solid #d4d5d9;
}

.card-body .primary-btn.right {
    background: #7e4eff url("../images/icon/arrow-right.svg") no-repeat;
    background-position-x: 92.5%;
    background-position-y: center;
    color:var(--color-text-inverse);
    border: var(--border-width-thin) solid #7e4eff;
}


.card-body .primary-btn:hover {
    background-color: #859eff;
    border: var(--border-width-thin) solid #859eff;
}

.card-body .secondary-cta {
    display: flex;
    flex-flow: row;
    align-items: center;
    font-size: var(--font-size-lg);
}


.feature-includes {
    display: flex;
    flex-flow: column;
    font-size: var(--font-size-lg);
    gap: var(--spacing-8);
}

.feature-includes .feature-line {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-lg);
    letter-spacing: var(--letter-spacing-tight);
    margin: 0;
}

.pricing-section {
    margin-top: var(--spacing-52);
    margin-bottom: 0;
}

.pricing-section .section-header {
    border-radius: var(--border-radius-3xl);
    margin-bottom: var(--spacing-24);
    padding: var(--spacing-8) var(--spacing-16);
}

.pricing-section .section-header h2 {
    font-size: var(--font-size-5xl);
    color: var(--color-text-inverse);
    letter-spacing: var(--letter-spacing-wide);
    text-align: center;
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.pricing-section .section-content .card-title {
    font-size: var(--font-size-5xl);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-normal);
    font-weight: var(--font-weight-normal);
}

.pricing-section .section-content .card-subtitle {
    font-size: var(--font-size-3xl);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-normal);
    font-weight: var(--font-weight-normal);
}