.savings-calculator-page {
    padding: var(--space-xl) var(--space-md) var(--space-2xl);
    color: var(--text-base);
    background: linear-gradient(180deg, var(--surface-base), var(--surface-subtle));
}

.savings-calculator-hero,
.savings-calculator-tool,
.savings-calculator-methodology {
    width: min(100%, 68rem);
    margin-inline: auto;
}

.savings-calculator-hero {
    /*padding-block: var(--space-xl);*/
}

.savings-calculator-hero__content,
.savings-calculator-tool__header,
.savings-calculator-result__header,
.savings-calculator-methodology > header {
    /*max-width: 44rem;*/
}

.savings-calculator-kicker {
    margin: 0 0 var(--space-xs);
    color: var(--text-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.savings-calculator-hero h1,
.savings-calculator-tool h2,
.savings-calculator-result h2,
.savings-calculator-methodology h2 {
    margin: 0;
    color: var(--text-strong);
    font-family: var(--font-display);
    line-height: 1.04;
}

.savings-calculator-hero h1 {
    font-size: 2.5em;
}

.savings-calculator-hero p:last-child,
.savings-calculator-tool__header p,
.savings-calculator-result__header p,
.savings-calculator-methodology > header p {
    margin: var(--space-md) 0 0;
    color: var(--text-muted);
    line-height: 1.65;
}

.savings-calculator-tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
}

.savings-calculator-tool__header {
    padding-top: var(--space-lg);
    /*border-top: 1px solid var(--border-subtle);*/
}

.savings-calculator-tool__header h2,
.savings-calculator-result h2,
.savings-calculator-methodology h2 {
    font-size: 2.2em;
}

.savings-calculator-form,
.savings-calculator-result {
    min-width: 0;
    padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-sm);
}

.savings-calculator-form {
    display: grid;
    gap: var(--space-lg);
}

.savings-calculator-form__fieldset {
    display: grid;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    border:0;
    border-top: 1px solid var(--border-subtle);
}

.savings-calculator-form__fieldset + .savings-calculator-form__fieldset {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-subtle);
}

.savings-calculator-form__fieldset legend {
    padding: 0;
    color: var(--text-strong);
    font-size: 1rem;
    font-weight: 800;
}

.savings-calculator-field {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
}

.savings-calculator-field > label {
    color: var(--text-strong);
    font-weight: 700;
}

.savings-calculator-field__control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border-base);
    border-radius: var(--radius-sm);
    background: var(--surface-base);
    color: var(--text-muted);
}

.savings-calculator-field__control:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 var(--space-2xs) var(--border-focus);
}

.savings-calculator-field input {
    min-width: 0;
    /*min-height: 2.9rem;*/
    padding: var(--space-sm) var(--space-md);
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-strong);
    font: inherit;
    font-weight: 700;
}

.savings-calculator-field__control > span {
    padding-inline: var(--space-md);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.savings-calculator-field small {
    color: var(--text-muted);
    line-height: 1.45;
}

.savings-calculator-button {
    min-height: 3rem;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--button-primary-bg);
    border-radius: var(--radius-sm);
    background: var(--button-primary-bg);
    color: var(--button-text);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base);
}

.savings-calculator-button:hover,
.savings-calculator-button:focus-visible {
    border-color: var(--button-primary-hover);
    background: var(--button-primary-hover);
    color: var(--button-text);
}

.savings-calculator-button:active {
    transform: translateY(1px);
}

.savings-calculator-result {
    display: grid;
    align-self: start;
    align-content: start;
    gap: var(--space-lg);
    border-color: var(--color-success);
}

.savings-calculator-result__primary {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    background: var(--badge-success);
}

.savings-calculator-result__primary span {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.savings-calculator-result__primary strong {
    color: var(--color-success);
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 7vw, 4rem);
    line-height: 0.95;
}

.savings-calculator-result__payback {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
}

.savings-calculator-result__payback strong {
    color: var(--text-strong);
}

.savings-calculator-result__payback span {
    color: var(--text-muted);
}

.savings-calculator-result__details {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
}

.savings-calculator-result__details div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
}

.savings-calculator-result__details div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.savings-calculator-result__details dt {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.savings-calculator-result__details dd {
    margin: 0;
    color: var(--text-strong);
    font-weight: 800;
    text-align: end;
}

.savings-calculator-methodology {
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border-subtle);
}

.savings-calculator-methodology ul {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding-inline-start: var(--space-lg);
    color: var(--text-muted);
    line-height: 1.6;
}

.savings-calculator-methodology li::marker {
    color: var(--text-accent);
}

@media (min-width: 768px) {
    .savings-calculator-page {
        /*padding-top: var(--space-2xl);*/
    }

    .savings-calculator-tool {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .savings-calculator-tool__header {
        grid-column: 1 / -1;
    }

    .savings-calculator-button {
        justify-self: start;
    }

    .savings-calculator-methodology {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
        align-items: start;
    }
}