.ocf-pricing {
    background: var(--ocf-bg-alt);
    color: var(--ocf-body);
    overflow: hidden;
}

.ocf-pricing--full {
    background: var(--ocf-bg);
}

.ocf-pricing__header {
    display: grid;
    gap: 0.75rem;
    max-width: 48rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.ocf-pricing__header > * {
    margin: 0;
}

.ocf-pricing__header > p:last-child {
    max-width: 62ch;
}

.ocf-pricing-grid,
.ocf-pricing-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    align-items: stretch;
}

.ocf-pricing-card,
.ocf-pricing-preview-card,
.ocf-pricing-addon-row,
.ocf-pricing-table-wrap {
    border: var(--card-border-width) solid var(--card-border-color);
    border-radius: var(--card-radius);
    background: var(--ocf-bg);
    box-shadow: var(--card-shadow);
}

.ocf-pricing-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: clamp(1.35rem, 2.7vw, 2rem);
}

.ocf-pricing-card.is-popular,
.ocf-pricing-preview-card.is-popular {
    border-color: var(--ocf-primary);
    box-shadow: 0 0 0 1px var(--ocf-primary), var(--card-shadow);
}

.ocf-pricing-badge {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 1rem;
    border-radius: var(--button-radius);
    background: var(--ocf-primary);
    padding: 0.42rem 0.72rem;
    color: #ffffff;
    font-size: var(--font-label-size);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}

.ocf-pricing-card__heading {
    display: grid;
    gap: 0.8rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ocf-border-light);
}

.ocf-pricing-card__heading h3,
.ocf-pricing-preview-card h3,
.ocf-pricing-addon-row h3 {
    margin: 0;
    color: var(--ocf-heading);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: var(--font-h3-size);
    line-height: 1.2;
}

.ocf-pricing-price,
.ocf-pricing-addon-price {
    margin: 0;
    color: var(--ocf-heading);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: clamp(1.65rem, 3vw, 2.3rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.ocf-pricing-features {
    display: grid;
    gap: 0.8rem;
    margin: 1.35rem 0 1.6rem;
    padding: 0;
    list-style: none;
}

.ocf-pricing-features li {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    min-width: 0;
    color: var(--ocf-body);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ocf-pricing-check {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.22rem;
    color: var(--ocf-primary);
}

.ocf-pricing-card__cta {
    justify-content: center;
    width: 100%;
    margin-top: auto;
}

.ocf-pricing-preview-card {
    position: relative;
    display: grid;
    gap: 0.85rem;
    align-content: start;
    min-width: 0;
    padding: clamp(1.25rem, 2.5vw, 1.7rem);
}

.ocf-pricing-preview-card .ocf-pricing-badge {
    margin-bottom: 0.1rem;
}

.ocf-pricing-preview-card .ocf-pricing-price {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
}

.ocf-pricing-preview-action {
    display: flex;
    justify-content: flex-start;
    margin-top: 2rem;
}

.ocf-pricing-subsection-heading {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
}

.ocf-pricing-subsection-heading > * {
    margin: 0;
}

.ocf-pricing-addons,
.ocf-pricing-individual {
    margin-top: clamp(3rem, 6vw, 5rem);
}

.ocf-pricing-addon-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1.25rem, 3vw, 1.8rem);
}

.ocf-pricing-addon-row > div {
    display: grid;
    gap: 0.55rem;
}

.ocf-pricing-addon-row p {
    margin: 0;
}

.ocf-pricing-addon-price {
    text-align: right;
    white-space: nowrap;
}

.ocf-pricing-addon-price span {
    display: block;
    margin-top: 0.3rem;
    color: var(--ocf-body);
    font-family: var(--ocf-font-body), system-ui, sans-serif;
    font-size: var(--font-label-size);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
}

.ocf-pricing-table-wrap {
    overflow: hidden;
}

.ocf-pricing-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ocf-pricing-table th,
.ocf-pricing-table td {
    padding: 1rem clamp(1rem, 2.5vw, 1.5rem);
    border-bottom: 1px solid var(--ocf-border-light);
    color: var(--ocf-body);
    text-align: left;
    line-height: 1.45;
}

.ocf-pricing-table thead th {
    background: var(--ocf-bg-alt);
    color: var(--ocf-heading);
    font-size: var(--font-label-size);
    font-weight: var(--font-weight-bold);
}

.ocf-pricing-table tbody th {
    width: 70%;
    color: var(--ocf-heading);
    font-weight: var(--font-weight-bold);
}

.ocf-pricing-table th:last-child,
.ocf-pricing-table td:last-child {
    width: 30%;
    text-align: right;
}

.ocf-pricing-table tbody tr:last-child th,
.ocf-pricing-table tbody tr:last-child td {
    border-bottom: 0;
}

.ocf-pricing-footnote {
    width: 100%;
    margin: 1.25rem 0 0;
    color: var(--ocf-body);
    line-height: 1.55;
}

@media (min-width: 901px) {
    .ocf-pricing-card.is-popular {
        transform: translateY(-0.5rem);
    }
}

@media (max-width: 900px) {
    .ocf-pricing-grid,
    .ocf-pricing-preview-grid {
        grid-template-columns: 1fr;
    }

    .ocf-pricing-card.is-popular {
        transform: none;
    }
}

@media (max-width: 640px) {
    .ocf-pricing-addon-row {
        grid-template-columns: 1fr;
    }

    .ocf-pricing-addon-price {
        text-align: left;
    }

    .ocf-pricing-table th,
    .ocf-pricing-table td {
        padding: 0.85rem 0.8rem;
        overflow-wrap: anywhere;
    }

    .ocf-pricing-table tbody th,
    .ocf-pricing-table th:last-child,
    .ocf-pricing-table td:last-child {
        width: auto;
    }

    .ocf-pricing-table td:last-child {
        white-space: nowrap;
    }

    .ocf-pricing-preview-action .btn-primary {
        width: 100%;
        justify-content: center;
    }
}