body:not(.theme-preload) .cover-letter-main-container,
body:not(.theme-preload) .cv-upload-area,
body:not(.theme-preload) .job-text-input,
body:not(.theme-preload) .cover-letter-result {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cover-letter-page {
    font-family: var(--font-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.cover-letter-page .bg-primary {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100vh;
}

.cover-letter-header {
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    padding: 0px 0 16px 0;
}
.cover-letter-title {
    font-size: var(--fs-32);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-32);
    letter-spacing: var(--ls-32);
    margin-bottom: 8px;
    font-family: var(--font-primary);
    color: var(--text-color);
}
.cover-letter-subtitle {
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    color: var(--text-color);
    margin-bottom: 0px;
    font-family: var(--font-primary);
}

.cover-letter-container {
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 0 24px 0;
}

/* Юр. страницы: ширина как у статьи блога (.article-container = 800px) */
.legal-doc-page .cover-letter-container,
.legal-doc-page .cover-letter-header {
    max-width: 800px;
}
.legal-doc-page .main-content > .container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.legal-doc-page .cover-letter-title {
    font-size: var(--fs-24);
    line-height: var(--lh-24);
    letter-spacing: var(--ls-24);
}
.legal-doc-page .article-content h2 {
    margin-top: 28px !important;
    margin-bottom: 12px;
    font-size: var(--fs-24);
    line-height: var(--lh-24);
    letter-spacing: var(--ls-24);
}
.legal-doc-page .article-content h2:first-of-type {
    margin-top: 0 !important;
}
.legal-doc-page .article-content h3 {
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: var(--fs-18);
    letter-spacing: var(--ls-18);
    line-height: var(--lh-18);
    font-weight: var(--fw-medium);
}
.legal-doc-page .article-content .legal-purpose-table,
.legal-doc-page .article-content figure.table {
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--separator-color, #e0e0e0);
    box-sizing: border-box;
}
html.dark-theme .legal-doc-page .article-content .legal-purpose-table,
html.dark-theme .legal-doc-page .article-content figure.table {
    border-color: #2e3035;
}
.legal-doc-page .article-content .legal-purpose-table table,
.legal-doc-page .article-content figure.table table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    font-size: var(--fs-16);
    letter-spacing: var(--ls-16);
    line-height: var(--lh-16);
    border: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: var(--surface-primary) !important;
    table-layout: fixed;
}
.legal-doc-page .article-content .legal-purpose-table th,
.legal-doc-page .article-content .legal-purpose-table td,
.legal-doc-page .article-content figure.table th,
.legal-doc-page .article-content figure.table td {
    border: 0 !important;
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 14px 16px !important;
    text-align: left !important;
    vertical-align: top !important;
    word-break: break-word;
}
.legal-doc-page .article-content .legal-purpose-table th:last-child,
.legal-doc-page .article-content .legal-purpose-table td:last-child,
.legal-doc-page .article-content figure.table th:last-child,
.legal-doc-page .article-content figure.table td:last-child {
    border-right: 0 !important;
}
.legal-doc-page .article-content .legal-purpose-table tr:last-child th,
.legal-doc-page .article-content .legal-purpose-table tr:last-child td,
.legal-doc-page .article-content figure.table tr:last-child th,
.legal-doc-page .article-content figure.table tr:last-child td {
    border-bottom: 0 !important;
}
.legal-doc-page .article-content .legal-purpose-table th,
.legal-doc-page .article-content figure.table th {
    width: 32%;
    background: transparent !important;
    color: var(--text-muted) !important;
    font-weight: var(--fw-medium) !important;
}
.legal-doc-page .article-content .legal-purpose-table tr:first-child td,
.legal-doc-page .article-content figure.table tr:first-child td,
.legal-doc-page .article-content .legal-purpose-table td,
.legal-doc-page .article-content figure.table td {
    background: transparent !important;
    color: var(--text-color) !important;
}
.legal-doc-page .article-content .legal-purpose-table td p,
.legal-doc-page .article-content figure.table td p {
    margin: 0 0 8px 0;
}
.legal-doc-page .article-content .legal-purpose-table td p:last-child,
.legal-doc-page .article-content figure.table td p:last-child {
    margin-bottom: 0;
}
html.dark-theme .legal-doc-page .article-content .legal-purpose-table th,
html.dark-theme .legal-doc-page .article-content .legal-purpose-table td,
html.dark-theme .legal-doc-page .article-content figure.table th,
html.dark-theme .legal-doc-page .article-content figure.table td {
    border-right-color: #2e3035 !important;
    border-bottom-color: #2e3035 !important;
}
html.dark-theme .legal-doc-page .article-content .legal-purpose-table th,
html.dark-theme .legal-doc-page .article-content figure.table th {
    background: transparent !important;
    color: var(--text-muted) !important;
}
html.dark-theme .legal-doc-page .article-content .legal-purpose-table td,
html.dark-theme .legal-doc-page .article-content figure.table td {
    background: transparent !important;
    color: #f3f4f6 !important;
}
.cover-letter-main-container {
    background: var(--surface-primary);
    border-radius: 24px;
    padding: 16px;
    margin-bottom: 16px;
}

.cover-letter-pro-cta {
    min-height: 294px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}
.cover-letter-pro-cta-title {
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    color: var(--text-color);
    margin-bottom: 2px;
}


.cover-letter-pro-cta-title .cl-cta-desktop-break { display: inline; }
@media (min-width: 1280px) {
    .cover-letter-pro-cta-title .cl-cta-desktop-break { display: block; }
}
.cover-letter-pro-cta .pro-modal-logo { gap: 8px; height: auto; margin-bottom: 0px; align-items: center; color: #121212; }
.cover-letter-pro-cta .hirehi-header-logo { height: 40px; width: auto; display: block; }
html.dark-theme .cover-letter-pro-cta .pro-modal-logo { color: #FFFFFF; }
.cover-letter-pro-cta .pro-badge { padding: 4px 8px; background: #121212; border-radius: 100px; }
.cover-letter-pro-cta .pro-badge-text { color: #FFFFFF; font-weight: var(--fw-semibold); font-size: 12px; line-height: 1; }
html.dark-theme .cover-letter-pro-cta .pro-badge { background: #FFFFFF; }
html.dark-theme .cover-letter-pro-cta .pro-badge-text { color: #121212; }

.cv-restored-notice {
    background: var(--surface-secondary);
    border: 1px solid var(--success-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.restored-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-14);
    color: var(--text-color);
}
.cv-upload-date {
    font-size: var(--fs-12);
    color: var(--text-muted);
}

.cover-letter-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}
.cover-letter-left-column,
.cover-letter-right-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cover-letter-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.cover-letter-section-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.cover-letter-section-label {
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    color: var(--text-muted);
    font-family: var(--font-primary);
}

.cv-upload-area {
    background: var(--surface-secondary);
    border: 2px dashed var(--filter-divider);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    min-height: 294px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cv-upload-area:hover {
    border-color: var(--accent-color);
    background: var(--hover-light);
}
.cv-upload-area.drag-over {
    border-color: var(--accent-color);
    background: var(--hover-light);
}
.cv-upload-area.loading {
    pointer-events: none;
}
.cv-upload-area.disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}
.cv-upload-area.disabled:hover {
    border-color: var(--filter-divider);
    background: var(--surface-secondary);
}
.cv-upload-area.success {
    border-color: var(--success-color);
    background: var(--success-light, rgba(58, 194, 113, 0.1));
}
.cv-upload-icon {
    width: 106px;
    height: 100px;
    margin: 0 auto 12px;
}
.cv-upload-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-medium);
    line-height: var(--lh-18);
    color: var(--text-color);
    margin-bottom: 8px;
    font-family: var(--font-primary);
    max-width: 100%;
    text-align: center;
}
.cv-upload-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}
.cv-upload-actions .btn {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}
.cv-upload-subtitle {
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    font-family: var(--font-primary);
    margin-bottom: 16px;
}
.cv-upload-input {
    display: none;
}

.job-text-area {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}
.job-text-input {
    width: 100%;
    min-height: 230px;
    padding: 16px;
    border: 2px solid var(--filter-divider);
    border-radius: 16px;
    background: var(--surface-secondary);
    color: var(--text-color);
    font-size: var(--fs-16);
    font-family: var(--font-primary);
    line-height: 1.5;
    resize: vertical;
    transition: all 0.2s ease;
    outline: none;
}
.job-text-input:focus {
    border-color: var(--accent-color);
    background: var(--surface-primary);
}
.job-text-input::placeholder {
    color: var(--text-muted);
}
.job-text-counter {
    text-align: right;
    font-size: var(--fs-12);
    color: var(--text-muted);
    margin-top: 8px;
}
.job-text-counter.error {
    color: var(--error-color);
}

.btn-generate {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    min-height: 48px;
}
.btn-generate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.btn-generate.loading .btn-text {
    opacity: 0.7;
}
.btn-spinner {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cover-letter-result {
    background: var(--surface-primary);
    border-radius: 24px;
    padding: 24px;
    margin-top: 16px;
}
.result-header {
    text-align: center;
    margin-bottom: 16px;
}
.result-title {
    font-size: var(--fs-20);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-20);
    color: var(--text-color);
    font-family: var(--font-primary);
}
.result-subtitle {
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    font-family: var(--font-primary);
    margin: 0;
}
.result-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.result-text {
    background: var(--surface-secondary);
    border-radius: 16px;
    padding: 20px;
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    color: var(--text-color);
    font-family: var(--font-primary);
    white-space: pre-wrap;
}

.result-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}
.result-actions .btn {
    flex: 0 0 auto;
    min-width: 160px;
    gap: 4px;
}

html.dark-theme .cv-upload-area {
    background: var(--surface-secondary);
    border-color: var(--filter-divider);
}
html.dark-theme .cv-upload-area:hover {
    background: var(--hover-light);
    border-color: var(--accent-color);
}
html.dark-theme .cv-upload-area.success {
    background: rgba(58, 194, 113, 0.15);
}
html.dark-theme .cv-upload-icon path[fill="#D1D1D1"] {
    fill: #474B55;
}
html.dark-theme .job-text-input {
    background: var(--surface-secondary);
    border-color: var(--filter-divider);
}
html.dark-theme .job-text-input:focus {
    background: var(--surface-primary);
}

@media (max-width: 1279px) {
    .cover-letter-header {
        width: 100%;
        max-width: 600px;
        padding: 0px 0 16px 0;
    }
    .cover-letter-container {
        width: 100%;
        max-width: 600px;
    }
    .legal-doc-page .cover-letter-container,
    .legal-doc-page .cover-letter-header,
    .legal-doc-page .main-content > .container {
        max-width: 600px;
    }
    .cover-letter-columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cover-letter-title {
        font-size: var(--fs-24);
        line-height: var(--lh-24);
        letter-spacing: var(--ls-24);
        max-width: 100%;
        word-wrap: break-word;
    }
    .cover-letter-subtitle {
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-16);
    }
    .cv-upload-area {
        padding: 16px;
        min-height: 160px;
        max-width: 100%;
        overflow: hidden;
    }
    .cv-upload-icon {
        max-width: 100%;
        width: 106px;
        height: auto;
    }
    .cv-upload-title {
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-16);
        margin-bottom: 6px;
    }
    .cv-upload-subtitle {
        font-size: var(--fs-14);
        margin-bottom: 12px;
    }
    .job-text-input {
        min-height: 160px;
        padding: 12px;
    }
    .result-title {
        font-size: var(--fs-20);
        line-height: var(--lh-20);
        letter-spacing: var(--ls-20);
    }

    .cv-restored-notice {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}
@media (max-width: 1279px) {
    .cover-letter-main-container {
        padding: 16px;
        overflow: hidden;
    }
    .cover-letter-result {
        padding: 16px;
    }
    .result-text {
        padding: 16px;
        font-size: var(--fs-16);
        letter-spacing: var(--ls-16);
        line-height: var(--lh-16);
    }
    .job-text-input {
        min-height: 140px;
        padding: 12px;
    }
}

.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

.cv-upload-area.success .cv-upload-icon {
    display: none;
}
.cv-upload-area.success::before {
    content: "✓";
    font-size: 32px;
    color: var(--success-color);
    font-weight: bold;
    margin-bottom: 8px;
}


.cover-letter-seo-section {
    width: 100%;
    margin-top: 16px;
}
.cover-letter-seo-container {
    display: flex;
    gap: 16px;
    max-width: 1152px;
    margin: 0 auto;
}
.cover-letter-seo-left,
.cover-letter-seo-right {
    flex: 1;
    background-color: var(--surface-primary);
    padding: 20px;
    border-radius: 24px;
}
.seo-block-title {
    font-size: var(--fs-20);
    line-height: var(--lh-20);
    letter-spacing: var(--ls-20);
    font-weight: var(--fw-semibold);
    color: var(--text-color);
    margin: 0 0 16px 0;
}
.seo-stats-list,
.seo-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.seo-stats-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
}
.seo-stats-list li:last-child {
    margin-bottom: 0;
}
.seo-stats-list li::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23F8F7F7'/%3E%3Cpath d='M14.39 7.85L9.55 12.69C9.49 12.75 9.39 12.8 9.29 12.8C9.19 12.8 9.1 12.75 9.03 12.69L6.86 10.53C6.71 10.38 6.71 10.14 6.86 9.99C7.01 9.84 7.25 9.84 7.39 9.99L9.29 11.89L13.61 7.56C13.76 7.43 14 7.43 14.14 7.56C14.29 7.7 14.29 7.7 14.39 7.85Z' fill='%23000000'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.seo-benefits-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
}
.seo-benefits-list li:last-child {
    margin-bottom: 0;
}
.seo-benefits-list li::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1C5.48 1 1 4.9 1 10C1 15.1 4.9 19 10 19C15.1 19 19 15.1 19 10C19 4.9 15.1 1 10 1ZM14.39 7.85L9.55 12.69C9.49 12.75 9.39 12.8 9.29 12.8C9.19 12.8 9.1 12.75 9.03 12.69L6.86 10.53C6.71 10.38 6.71 10.14 6.86 9.99C7.01 9.84 7.25 9.84 7.39 9.99L9.29 11.89L13.61 7.56C13.76 7.43 14 7.43 14.14 7.56C14.29 7.7 14.29 7.7 14.39 7.85Z' fill='%233AC271'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.other-services-section {
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--surface-primary);
    border-radius: 24px;
    box-sizing: border-box;
}

.cover-letter-seo-section + .other-services-section {
    margin-top: 16px;
}

.other-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.other-services-card {
    min-height: 56px;
    padding: 12px 16px;
    background-color: var(--surface-secondary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    color: var(--text-color);
    text-decoration: none;
    box-sizing: border-box;
}

.other-services-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: block;
}

.other-services-icon--dark {
    display: none;
}

html.dark-theme .other-services-icon--light {
    display: none;
}

html.dark-theme .other-services-icon--dark {
    display: block;
}

.other-services-label {
    min-width: 0;
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    line-height: 18px;
    letter-spacing: var(--ls-14);
}

@media (max-width: 1279px) {
    .cover-letter-main-container {
        margin-bottom: 0;
    }
    .cover-letter-pro-cta { min-height: 220px; }
    .cover-letter-seo-section {
        max-width: 600px;
        margin: 16px auto 0;
    }
    .cover-letter-seo-container {
        flex-direction: column;
        gap: 16px;
        max-width: 100%;
    }
    .cover-letter-seo-left,
    .cover-letter-seo-right {
        padding: 16px;
    }
    .other-services-section {
        max-width: 600px;
        margin: 0 auto;
        padding: 16px;
    }
    .other-services-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        gap: 4px;
    }
    .other-services-grid::-webkit-scrollbar {
        display: none;
    }
    .other-services-card {
        flex: 0 0 auto;
        padding-right: 20px;
    }
    .seo-block-title {
        font-size: var(--fs-20);
        line-height: var(--lh-20);
        letter-spacing: var(--ls-20);
        margin-bottom: 16px;
    }
    .seo-stats-list li,
    .seo-benefits-list li {
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        letter-spacing: var(--ls-16);
        margin-bottom: 12px;
    }
    .seo-stats-list li {
        padding-left: 28px;
    }
    .seo-benefits-list li {
        padding-left: 28px;
    }
    .seo-stats-list li::before {
        top: 2px;
        transform: none;
        left: 0;
    }
    .seo-benefits-list li::before {
        top: 2px;
        transform: none;
        left: 0;
        width: 20px;
        height: 20px;
    }
    .seo-stats-list li:last-child,
    .seo-benefits-list li:last-child {
        margin-bottom: 0;
    }
}


.promo-text {
    font-size: var(--fs-16) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-20) !important;
    letter-spacing: var(--ls-16) !important;
    color: var(--text-color) !important;
}

.promo-h3 {
    font-size: var(--fs-16) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-20) !important;
    letter-spacing: var(--ls-16) !important;
    color: var(--text-color) !important;
}

.promo-pricing {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 16px 0;
}

.promo-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.promo-pricing-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-radius: 16px;
    border: none;
    background: var(--surface-secondary);
    box-sizing: border-box;
    min-width: 0;
}

.promo-pricing-price-row {
    display: block;
    margin-top: 4px;
}

.promo-pricing-volume {
    font-size: var(--fs-14);
    line-height: var(--lh-14);
    letter-spacing: var(--ls-14);
    font-weight: var(--fw-regular);
    color: var(--text-color);
}

.promo-pricing-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    background: #FF7733;
    color: #fff;
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    line-height: var(--lh-12);
    letter-spacing: var(--ls-12);
    padding: 1px 6px;
    border-radius: 8px;
}

.promo-pricing-card--featured {
    position: relative;
    padding-right: 72px;
}

.promo-pricing-card--featured .promo-pricing-badge {
    position: absolute;
    top: 16px;
    right: 16px;
}

.promo-pricing-price {
    font-size: var(--fs-24);
    line-height: var(--lh-24);
    letter-spacing: var(--ls-24);
    font-weight: var(--fw-semibold);
    color: var(--text-color);
}

.promo-pricing-price-row .promo-pricing-price {
    margin-top: 0;
}

.promo-pricing-cpm {
    font-size: var(--fs-12);
    line-height: var(--lh-12);
    letter-spacing: var(--ls-12);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
}

.promo-pricing-card:not(.promo-pricing-card--featured):not(.promo-pricing-card--month) .promo-pricing-price {
    margin-top: 4px;
}

.promo-pricing-card--month {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.promo-pricing-card--month .promo-pricing-volume {
    font-size: var(--fs-16);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
    color: var(--text-color);
}

.promo-pricing-card--month .promo-pricing-price {
    margin-top: 0;
    flex-shrink: 0;
}

@media (max-width: 1279px) {
    .promo-pricing-grid {
        grid-template-columns: 1fr;
    }

    .promo-pricing-card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 2px 12px;
        padding: 10px 12px;
    }

    .promo-pricing-card > .promo-pricing-volume {
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }

    .promo-pricing-card--featured {
        padding-right: 12px;
    }

    .promo-pricing-price-row {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 0;
        flex-shrink: 0;
        order: 2;
    }

    .promo-pricing-card--featured .promo-pricing-badge {
        position: static;
    }

    .promo-pricing-price {
        font-size: var(--fs-18);
        line-height: var(--lh-18);
        letter-spacing: var(--ls-18);
        margin-top: 0;
        flex-shrink: 0;
        order: 2;
    }

    .promo-pricing-cpm {
        flex: 1 1 100%;
        order: 3;
    }

    .promo-pricing-card--month {
        flex-wrap: nowrap;
        align-items: center;
    }

    .promo-pricing-card--month .promo-pricing-volume {
        font-size: var(--fs-14);
        line-height: var(--lh-14);
        letter-spacing: var(--ls-14);
    }
}