/* ==========================================================
   PLANOS
   ========================================================== */

.pricing {
    position: relative;

    overflow: hidden;

    background:
        var(--color-bg-soft);
}


/* ==========================================================
   HEADER
   ========================================================== */

.pricing__header {
    max-width:
        850px;

    margin-inline:
        auto;

    margin-bottom:
        clamp(
            var(--space-8),
            8vw,
            var(--space-15)
        );

    text-align:
        center;
}


.pricing__title {
    margin-top:
        var(--space-2);

    letter-spacing:
        -0.035em;
}


.pricing__title span {
    display: block;

    color:
        var(--color-accent);
}


.pricing__intro {
    max-width:
        650px;

    margin:
        var(--space-3)
        auto
        0;
}


/* ==========================================================
   GRID
   ========================================================== */

.pricing__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items:
        stretch;

    gap:
        clamp(
            var(--space-3),
            2vw,
            var(--space-4)
        );
}


/* ==========================================================
   CARD
   ========================================================== */

.pricing-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding:
        clamp(
            1.75rem,
            3vw,
            2.5rem
        );

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-card);

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}


.pricing-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-card-hover);
}


/* ==========================================================
   FEATURED
   ========================================================== */

.pricing-card--featured {
    z-index: 2;

    border-color:
        transparent;

    background:
        var(--color-surface-navy);

    color:
        var(--color-text-inverse);

    box-shadow:
        var(--shadow-featured);

    transform:
        translateY(-14px);
}


.pricing-card--featured:hover {
    transform:
        translateY(-19px);
}


.pricing-card--featured
.pricing-card__name,

.pricing-card--featured
.pricing-card__description {
    color:
        var(--color-text-inverse);
}


.pricing-card--featured
.pricing-card__tagline,

.pricing-card--featured
.pricing-card__microcopy {
    color:
        var(--color-text-muted-inverse);
}


/* ==========================================================
   BADGE
   ========================================================== */

.pricing-card__badge {
    position: absolute;

    top: 0;
    left: 50%;

    padding:
        0.55rem
        1rem;

    border-radius:
        var(--radius-pill);

    background:
        var(--color-accent);

    color:
        var(--color-surface-dark);

    font-size:
        0.68rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.12em;

    line-height:
        1;

    text-transform:
        uppercase;

    transform:
        translate(-50%, -50%);
}


/* ==========================================================
   TOP
   ========================================================== */

.pricing-card__label {
    display:
        inline-block;

    color:
        var(--color-accent);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


.pricing-card--featured
.pricing-card__label {
    color:
        var(--color-accent-soft);
}


.pricing-card__name {
    margin-top:
        var(--space-2);

    font-size:
        clamp(
            2rem,
            2.7vw,
            2.8rem
        );

    line-height:
        1.02;
}


.pricing-card__tagline {
    margin-top:
        var(--space-2);

    font-size:
        var(--font-size-sm);

    line-height:
        1.6;
}


/* ==========================================================
   PRICE
   ========================================================== */

.pricing-card__price {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        flex-end;

    gap:
        0.3rem;

    margin-top:
        var(--space-5);
}


.pricing-card__currency {
    align-self:
        flex-start;

    margin-top:
        0.55rem;

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);
}


.pricing-card__price strong {
    font-family:
        var(--font-body);

    font-size:
        clamp(
            2.75rem,
            4vw,
            4.2rem
        );

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.06em;

    line-height:
        0.9;
}


.pricing-card__period {
    margin-bottom:
        0.25rem;

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-medium);
}


.pricing-card--featured
.pricing-card__period {
    color:
        var(--color-text-muted-inverse);
}


.pricing-card__recurrence {
    display:
        inline-block;

    width:
        fit-content;

    margin-top:
        0.75rem;

    padding:
        0.4rem
        0.65rem;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-pill);

    color:
        var(--color-text-secondary);

    font-size:
        0.68rem;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.pricing-card--featured
.pricing-card__recurrence {
    border-color:
        var(--color-border-dark);

    color:
        var(--color-accent-soft);
}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

.pricing-card__description {
    margin-top:
        var(--space-4);

    line-height:
        1.7;
}


/* ==========================================================
   FEATURES
   ========================================================== */

.pricing-card__features {
    display:
        grid;

    gap:
        0.85rem;

    margin-top:
        var(--space-5);

    margin-bottom:
        var(--space-5);
}


.pricing-card__features li {
    display:
        grid;

    grid-template-columns:
        18px
        1fr;

    align-items:
        start;

    gap:
        0.65rem;

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-size-sm);

    line-height:
        1.55;
}


.pricing-card--featured
.pricing-card__features li {
    color:
        rgba(248, 247, 243, 0.82);
}


.pricing-card__features svg {
    width:
        17px;

    height:
        17px;

    margin-top:
        0.12rem;

    color:
        var(--color-accent);

    fill:
        none;
}


.pricing-card--featured
.pricing-card__features svg {
    color:
        var(--color-accent-soft);
}


/* ==========================================================
   NOTE
   ========================================================== */

.pricing-card__note {
    display:
        grid;

    grid-template-columns:
        18px
        1fr;

    gap:
        0.7rem;

    margin-top:
        auto;

    margin-bottom:
        var(--space-4);

    padding:
        var(--space-2);

    border-radius:
        var(--radius-md);

    background:
        rgba(16, 24, 32, 0.04);
}


.pricing-card__note svg {
    width:
        17px;

    height:
        17px;

    color:
        var(--color-accent);

    fill:
        none;
}


.pricing-card__note p {
    font-size:
        0.78rem;

    line-height:
        1.55;
}


/* ==========================================================
   CTA
   ========================================================== */

.pricing-card__cta {
    width:
        100%;

    margin-top:
        auto;
}


.pricing-card__microcopy {
    display:
        block;

    margin-top:
        var(--space-2);

    color:
        var(--color-text-secondary);

    font-size:
        0.72rem;

    line-height:
        1.5;

    text-align:
        center;
}


/* ==========================================================
   MAINTENANCE
   ========================================================== */

.maintenance {
    margin-top:
        clamp(
            var(--space-8),
            7vw,
            var(--space-12)
        );

    border-top:
        1px solid
        var(--color-border);

    border-bottom:
        1px solid
        var(--color-border);
}


/* ==========================================================
   TRIGGER
   ========================================================== */

.maintenance__trigger {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-4);

    width:
        100%;

    padding:
        var(--space-4)
        0;

    background:
        transparent;

    color:
        var(--color-text-primary);

    text-align:
        left;

    cursor:
        pointer;
}


.maintenance__trigger-content {
    display:
        grid;

    gap:
        0.5rem;
}


.maintenance__eyebrow {
    color:
        var(--color-accent);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.maintenance__trigger strong {
    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.65rem,
            2.4vw,
            2.35rem
        );

    font-weight:
        var(--font-weight-semibold);

    line-height:
        1.1;
}


/* ==========================================================
   ICON
   ========================================================== */

.maintenance__icon {
    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    width:
        44px;

    height:
        44px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        50%;

    transition:
        background-color var(--transition-base),
        transform var(--transition-base);
}


.maintenance__icon svg {
    width:
        18px;

    height:
        18px;

    fill:
        none;

    transition:
        transform var(--transition-base);
}


.maintenance__trigger:hover
.maintenance__icon {
    background:
        var(--color-surface-dark);

    color:
        var(--color-text-inverse);
}


.maintenance__trigger[aria-expanded="true"]
.maintenance__icon svg {
    transform:
        rotate(45deg);
}


/* ==========================================================
   CONTENT
   ========================================================== */

.maintenance__content {
    overflow:
        hidden;
}


.maintenance__content-inner {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        clamp(
            var(--space-5),
            8vw,
            var(--space-15)
        );

    padding:
        var(--space-2)
        0
        var(--space-5);
}


.maintenance__column h3 {
    font-family:
        var(--font-body);

    font-size:
        var(--font-size-base);

    font-weight:
        var(--font-weight-semibold);
}


.maintenance__column ul {
    display:
        grid;

    gap:
        0.65rem;

    margin-top:
        var(--space-2);
}


.maintenance__column li {
    position:
        relative;

    padding-left:
        1.1rem;

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-size-sm);

    line-height:
        1.6;
}


.maintenance__column li::before {
    content:
        "";

    position:
        absolute;

    top:
        0.65em;

    left:
        0;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--color-accent);
}


/* ==========================================================
   FINAL CTA
   ========================================================== */

.pricing-final-cta {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        var(--space-6);

    margin-top:
        var(--space-10);

    padding:
        clamp(
            2rem,
            5vw,
            4rem
        );

    border-radius:
        var(--radius-lg);

    background:
        var(--color-surface-dark);

    color:
        var(--color-text-inverse);
}


.pricing-final-cta h3 {
    max-width:
        700px;

    margin-top:
        var(--space-2);

    color:
        var(--color-text-inverse);

    font-size:
        clamp(
            2rem,
            3.5vw,
            3.4rem
        );
}


.pricing-final-cta p {
    max-width:
        640px;

    margin-top:
        var(--space-2);

    color:
        var(--color-text-muted-inverse);
}


.pricing-final-cta__button {
    min-width:
        210px;
}


/* ==========================================================
   STAGGER
   ========================================================== */

.pricing-card:nth-child(2) {
    transition-delay:
        100ms;
}


.pricing-card:nth-child(3) {
    transition-delay:
        200ms;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .pricing-card,
    .pricing-card--featured,
    .pricing-card:hover,
    .pricing-card--featured:hover {
        transform:
            none;
    }

}