/*
 * Menyra Marketing Pricing — Module 4.3
 */

.mn-pricing-kicker {
    margin: 0 0 var(--mn-space-3);
    color: var(--mn-color-primary);
    font-size: var(--mn-font-size-sm);
    font-weight: var(--mn-font-weight-bold);
}

.mn-pricing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.9fr);
    align-items: center;
    gap: clamp(2rem, 7vw, 7rem);
    padding-block: clamp(2.5rem, 7vw, 6rem);
}

.mn-pricing-hero__copy h1 {
    max-width: 12ch;
    margin: 0;
    color: var(--mn-color-text);
    font-size: clamp(3rem, 7vw, 6rem);
    letter-spacing: -0.06em;
    line-height: 0.96;
}

.mn-pricing-hero__copy h1 em {
    color: var(--mn-color-primary);
    font-style: normal;
}

.mn-pricing-hero__copy > p:last-of-type {
    max-width: 44rem;
    margin: var(--mn-space-6) 0 0;
    color: var(--mn-color-text-muted);
    font-size: var(--mn-font-size-xl);
    line-height: 1.65;
}

.mn-pricing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mn-space-3);
    margin-top: var(--mn-space-6);
}

.mn-pricing-summary {
    display: grid;
    padding: clamp(1.75rem, 5vw, 3.5rem);
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-2xl);
    background:
        radial-gradient(circle at 100% 0, var(--mn-color-accent-soft), transparent 15rem),
        var(--mn-color-surface);
    box-shadow: var(--mn-shadow-lg);
}

.mn-pricing-summary > span {
    color: var(--mn-color-text-subtle);
    font-size: var(--mn-font-size-sm);
    font-weight: var(--mn-font-weight-bold);
    text-transform: uppercase;
}

.mn-pricing-summary > strong {
    margin-top: var(--mn-space-4);
    color: var(--mn-color-primary);
    font-size: clamp(4rem, 9vw, 7rem);
    letter-spacing: -0.07em;
    line-height: 0.9;
}

.mn-pricing-summary > small {
    margin-top: 0.5rem;
    color: var(--mn-color-text-muted);
    font-size: var(--mn-font-size-base);
}

.mn-pricing-summary hr {
    width: 100%;
    margin: var(--mn-space-6) 0;
    border: 0;
    border-top: var(--mn-border-default);
}

.mn-pricing-summary p {
    margin: 0;
    color: var(--mn-color-text-muted);
    line-height: 1.65;
}

.mn-pricing-summary__annual {
    margin-top: var(--mn-space-3) !important;
    color: var(--mn-color-primary) !important;
    font-weight: var(--mn-font-weight-semibold);
}

.mn-pricing-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mn-space-3);
    margin-block: clamp(1rem, 4vw, 3rem) clamp(4rem, 9vw, 8rem);
}

.mn-pricing-principles article {
    display: grid;
    gap: 0.65rem;
    padding: var(--mn-space-5);
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-xl);
    background: var(--mn-color-surface);
}

.mn-pricing-principles span {
    color: var(--mn-color-accent);
    font-size: var(--mn-font-size-xs);
    font-weight: var(--mn-font-weight-bold);
    text-transform: uppercase;
}

.mn-pricing-principles strong {
    font-size: var(--mn-font-size-lg);
}

.mn-pricing-principles p {
    margin: 0;
    color: var(--mn-color-text-muted);
    line-height: 1.6;
}

.mn-pricing-section {
    scroll-margin-top: 6rem;
    padding-block: clamp(3.5rem, 8vw, 7rem);
}

.mn-pricing-section__heading {
    max-width: 55rem;
    margin-bottom: clamp(2rem, 6vw, 4rem);
}

.mn-pricing-section__heading h2,
.mn-pricing-included h2,
.mn-pricing-trial h2,
.mn-pricing-cta h2 {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4rem);
    letter-spacing: -0.05em;
    line-height: 1.05;
}

.mn-pricing-section__heading > p:last-child,
.mn-pricing-included > div > p:last-child,
.mn-pricing-trial > div > p:last-child {
    margin: var(--mn-space-4) 0 0;
    color: var(--mn-color-text-muted);
    font-size: var(--mn-font-size-lg);
    line-height: 1.7;
}

.mn-pricing-calculator {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
    gap: var(--mn-space-4);
    padding: clamp(1rem, 3vw, 1.5rem);
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-2xl);
    background: var(--mn-color-surface);
    box-shadow: var(--mn-shadow-md);
}

.mn-pricing-calculator__controls {
    display: grid;
    align-content: start;
    gap: var(--mn-space-6);
    padding: clamp(1rem, 3vw, 2rem);
}

.mn-pricing-calculator__billing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    padding: 0.35rem;
    border-radius: var(--mn-radius-lg);
    background: var(--mn-color-surface-subtle);
}

.mn-pricing-calculator__billing button {
    display: grid;
    min-height: 3.5rem;
    place-items: center;
    border: 0;
    border-radius: var(--mn-radius-md);
    background: transparent;
    color: var(--mn-color-text-muted);
    cursor: pointer;
    font: inherit;
    font-weight: var(--mn-font-weight-semibold);
}

.mn-pricing-calculator__billing button span {
    font-size: var(--mn-font-size-xs);
}

.mn-pricing-calculator__billing button.is-active {
    background: var(--mn-color-surface);
    color: var(--mn-color-primary);
    box-shadow: var(--mn-shadow-sm);
}

.mn-pricing-calculator__stores {
    display: grid;
    gap: var(--mn-space-5);
}

.mn-pricing-calculator__stores > span {
    display: grid;
    gap: var(--mn-space-1);
}

.mn-pricing-calculator__stores small {
    color: var(--mn-color-text-muted);
    line-height: 1.5;
}

.mn-pricing-stepper {
    display: grid;
    grid-template-columns: 3.2rem minmax(5rem, 1fr) 3.2rem;
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-xl);
    overflow: hidden;
}

.mn-pricing-stepper button,
.mn-pricing-stepper input {
    min-height: 3.8rem;
    border: 0;
    background: var(--mn-color-surface);
    color: var(--mn-color-text);
    font: inherit;
}

.mn-pricing-stepper button {
    cursor: pointer;
    font-size: var(--mn-font-size-xl);
}

.mn-pricing-stepper button:hover {
    background: var(--mn-color-primary-soft);
    color: var(--mn-color-primary);
}

.mn-pricing-stepper input {
    min-width: 0;
    border-right: var(--mn-border-default);
    border-left: var(--mn-border-default);
    font-size: var(--mn-font-size-xl);
    font-weight: var(--mn-font-weight-bold);
    text-align: center;
    appearance: textfield;
}

.mn-pricing-stepper input::-webkit-inner-spin-button,
.mn-pricing-stepper input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.mn-pricing-calculator__result {
    display: grid;
    gap: var(--mn-space-5);
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: calc(var(--mn-radius-2xl) - 0.35rem);
    background:
        linear-gradient(145deg, var(--mn-color-primary-soft), transparent 72%),
        var(--mn-color-surface-subtle);
}

.mn-pricing-calculator__result > div:first-child {
    display: grid;
}

.mn-pricing-calculator__result > div:first-child > span {
    color: var(--mn-color-text-muted);
    font-size: var(--mn-font-size-sm);
    font-weight: var(--mn-font-weight-semibold);
}

.mn-pricing-calculator__result > div:first-child > strong {
    margin-top: var(--mn-space-2);
    color: var(--mn-color-primary);
    font-size: clamp(3.5rem, 8vw, 6rem);
    letter-spacing: -0.065em;
    line-height: 0.9;
}

.mn-pricing-calculator__result > div:first-child > small {
    margin-top: 0.5rem;
    color: var(--mn-color-text-muted);
}

.mn-pricing-calculator__result dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mn-space-3);
    margin: 0;
}

.mn-pricing-calculator__result dl div {
    padding: var(--mn-space-4);
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-lg);
    background: color-mix(in srgb, var(--mn-color-surface) 84%, transparent);
}

.mn-pricing-calculator__result dt {
    color: var(--mn-color-text-subtle);
    font-size: var(--mn-font-size-xs);
}

.mn-pricing-calculator__result dd {
    margin: 0.35rem 0 0;
    color: var(--mn-color-text);
    font-weight: var(--mn-font-weight-bold);
}

.mn-pricing-calculator__result > p {
    margin: 0;
    color: var(--mn-color-text-muted);
    line-height: 1.6;
}

.mn-pricing-tax-note {
    margin: var(--mn-space-3) 0 0;
    color: var(--mn-color-text-subtle);
    font-size: var(--mn-font-size-xs);
}

.mn-pricing-examples {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--mn-space-3);
}

.mn-pricing-examples article {
    display: grid;
    gap: var(--mn-space-4);
    padding: var(--mn-space-5);
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-xl);
    background: var(--mn-color-surface);
}

.mn-pricing-examples article > span {
    color: var(--mn-color-text-muted);
    font-weight: var(--mn-font-weight-semibold);
}

.mn-pricing-examples article > strong {
    color: var(--mn-color-primary);
    font-size: var(--mn-font-size-2xl);
}

.mn-pricing-examples article > strong small {
    margin-left: 0.25rem;
    color: var(--mn-color-text-subtle);
    font-size: var(--mn-font-size-xs);
    font-weight: var(--mn-font-weight-normal);
}

.mn-pricing-examples article > p {
    margin: 0;
    color: var(--mn-color-text-muted);
    font-size: var(--mn-font-size-sm);
    line-height: 1.5;
}

.mn-pricing-included {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
    gap: clamp(2rem, 7vw, 6rem);
    align-items: center;
    margin-block: clamp(4rem, 9vw, 8rem);
    padding: clamp(2rem, 6vw, 5rem);
    border-radius: var(--mn-radius-2xl);
    background: var(--mn-color-primary-soft);
}

.mn-pricing-included ul {
    display: grid;
    gap: var(--mn-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mn-pricing-included li {
    padding-bottom: var(--mn-space-3);
    border-bottom: var(--mn-border-default);
}

.mn-pricing-included li::before {
    margin-right: 0.65rem;
    color: var(--mn-color-success);
    content: "✓";
    font-weight: var(--mn-font-weight-bold);
}

.mn-pricing-trial {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    padding-block: clamp(3rem, 7vw, 6rem);
    border-top: var(--mn-border-default);
    border-bottom: var(--mn-border-default);
}

.mn-pricing-trial__badge {
    display: grid;
    width: 6rem;
    height: 6rem;
    place-items: center;
    border-radius: 50%;
    background: var(--mn-color-accent-soft);
    color: var(--mn-color-accent-strong);
    font-weight: var(--mn-font-weight-bold);
    transform: rotate(-6deg);
}

.mn-pricing-trial__note {
    display: grid;
    gap: 0.35rem;
    padding: var(--mn-space-5);
    border-radius: var(--mn-radius-xl);
    background: var(--mn-color-surface);
    box-shadow: var(--mn-shadow-sm);
}

.mn-pricing-trial__note span {
    color: var(--mn-color-text-muted);
    font-size: var(--mn-font-size-sm);
}

.mn-pricing-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--mn-space-8);
    margin-block: clamp(4rem, 8vw, 7rem);
    padding: clamp(2rem, 6vw, 5rem);
    border-radius: var(--mn-radius-2xl);
    background: var(--mn-color-text);
    color: var(--mn-color-surface);
}

.mn-pricing-cta h2 {
    max-width: 17ch;
    color: inherit;
}

.mn-pricing-cta > div:last-child {
    display: grid;
    gap: var(--mn-space-3);
}

.mn-pricing-cta > div:last-child p {
    max-width: 23rem;
    margin: 0;
    font-size: var(--mn-font-size-xs);
    opacity: 0.72;
}

@media (max-width: 70rem) {
    .mn-pricing-examples {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 64rem) {
    .mn-pricing-hero,
    .mn-pricing-calculator,
    .mn-pricing-included,
    .mn-pricing-trial,
    .mn-pricing-cta {
        grid-template-columns: 1fr;
    }

    .mn-pricing-summary {
        max-width: 38rem;
    }

    .mn-pricing-trial__badge {
        width: 5rem;
        height: 5rem;
    }

    .mn-pricing-trial__note {
        max-width: 24rem;
    }
}

@media (max-width: 48rem) {
    .mn-pricing-principles,
    .mn-pricing-examples {
        grid-template-columns: 1fr;
    }

    .mn-pricing-calculator__result dl {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 40rem) {
    .mn-pricing-hero__copy h1 {
        font-size: clamp(2.6rem, 15vw, 4.2rem);
    }

    .mn-pricing-hero__actions {
        display: grid;
    }

    .mn-pricing-hero__actions .mn-button,
    .mn-pricing-cta .mn-button {
        width: 100%;
    }

    .mn-pricing-calculator {
        padding: var(--mn-space-3);
    }

    .mn-pricing-calculator__controls,
    .mn-pricing-calculator__result {
        padding: var(--mn-space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mn-pricing-trial__badge {
        transform: none;
    }
}