/* Cost pages, the calculator and the price index. */

.pricing > * + * {
    margin-top: var(--space-6);
}

.pricing .calculator-form {
    max-width: 36rem;
}

.pricing .calculator-form fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.pricing .calculator-form fieldset legend {
    width: 100%;
}

.pricing .calculator-form > button {
    min-height: 3.25rem;
    box-shadow: var(--shadow-brand);
}

.pricing-result {
    max-width: 44rem;
    padding: var(--space-5);
    background: linear-gradient(180deg, var(--color-brand-tint) 0%, var(--color-surface) 100%);
    border: 1px solid var(--color-brand-line);
    border-radius: var(--radius-lg);
}

.pricing-result > h2 {
    margin-bottom: var(--space-2);
    font-size: var(--step-3);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.pricing-result h3 {
    margin-top: var(--space-5);
    font-size: 1rem;
}

.pricing-result ul {
    margin-bottom: 0;
}

.pricing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.pricing-actions form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-2);
}

.pricing-actions form + form button {
    background: var(--color-surface);
    border-color: var(--color-control-border);
    color: var(--color-ink);
}

.pricing-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.pricing-subnav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.pricing-subnav a:hover,
.pricing-subnav a[aria-current="page"] {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
}

.pricing-note {
    color: var(--color-muted);
    font-size: 0.9375rem;
}

.pricing [data-controller="calculator"] { display: grid; gap: var(--space-5); }
.pricing-result__eyebrow { margin: 0 0 var(--space-2); font-size: var(--step--1); font-weight: 700; color: var(--color-brand-deep); }
.pricing-result [data-result-heading] { margin: 0; font-size: var(--step-4); line-height: var(--leading-tight); letter-spacing: -0.03em; }
.pricing-result details { margin-block: var(--space-5); }
.pricing-result summary { min-height: 44px; cursor: pointer; font-weight: 600; }
.pricing-result details p { max-width: var(--measure); }
.pricing :is(p, li) { max-width: var(--measure); }

.pricing-method { max-width: 52rem; padding: var(--space-4); background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius); }
.pricing-method summary { min-height: 44px; font-weight: 700; cursor: pointer; }

/* Fields carry their own one-line message, so rows sit close together. */

.pricing .calculator-form {
    row-gap: var(--space-2);
}

.calculator-form fieldset .field__msg { flex-basis: 100%; }

.pricing [data-calculator-target="status"] { color: var(--color-danger); }

.pricing-result [data-result-heading] { scroll-margin-top: calc(var(--header-height) + var(--space-5)); }