.lc-cost-calculator {
    --lc-cost-navy-950: #06101f;
    --lc-cost-navy-900: #0a1830;
    --lc-cost-navy-800: #102443;
    --lc-cost-text: #f4f8ff;
    --lc-cost-muted: #b7c5d9;
    --lc-cost-cyan: #22d3ee;
    --lc-cost-purple: #8b5cf6;
    --lc-cost-lime: #b7e444;
    --lc-cost-danger: #ff9a9a;
    --lc-cost-focus: #f8fafc;
    --lc-cost-control-border: #6fa7d8;
    box-sizing: border-box;
    min-inline-size: 0;
    inline-size: 100%;
    margin-block: clamp(2rem, 5vw, 4rem);
    padding: clamp(1.25rem, 3vw, 2rem);
    overflow: hidden;
    border: 1px solid #315078;
    border-radius: 1.25rem;
    background: linear-gradient(145deg, var(--lc-cost-navy-900), #081529);
    box-shadow: 0 1.25rem 4rem rgb(0 0 0 / 28%);
    color: var(--lc-cost-text);
}

.lc-cost-calculator *,
.lc-cost-calculator *::before,
.lc-cost-calculator *::after { box-sizing: border-box; }

.lc-cost-calculator .eyebrow {
    margin: 0 0 .5rem;
    color: var(--lc-cost-lime);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lc-cost-calculator h2,
.lc-cost-calculator h3 { color: var(--lc-cost-text); line-height: 1.15; }
.lc-cost-calculator h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.lc-cost-calculator .intro,
.lc-cost-calculator .fine-print { color: var(--lc-cost-muted); }

.lc-cost-calculator .calculator-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .85fr);
    gap: 1.5rem;
    min-inline-size: 0;
    margin-block-start: 1.5rem;
}

.lc-cost-calculator .panel {
    min-inline-size: 0;
    padding: 1.25rem;
    border: 1px solid #42658f;
    border-radius: 1rem;
    background: rgb(7 22 43 / 75%);
}

.lc-cost-calculator .field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}
.lc-cost-calculator .field { display: grid; min-inline-size: 0; gap: .35rem; }
.lc-cost-calculator .field label { color: var(--lc-cost-text); font-weight: 700; }
.lc-cost-calculator .hint,
.lc-cost-calculator .field-error { font-size: .82rem; overflow-wrap: anywhere; }
.lc-cost-calculator .hint { color: var(--lc-cost-muted); }
.lc-cost-calculator .field-error,
.lc-cost-calculator .form-error { color: var(--lc-cost-danger); }
.lc-cost-calculator .field-error { min-block-size: 1.25rem; }
.lc-cost-calculator .form-error { min-block-size: 1.5rem; margin: 0 0 .75rem; font-weight: 700; }

.lc-cost-calculator input {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 44px;
    padding: .65rem .75rem;
    border: 2px solid var(--lc-cost-control-border);
    border-radius: .65rem;
    background: #061226;
    color: var(--lc-cost-text);
    font: inherit;
}

.lc-cost-calculator input:focus-visible,
.lc-cost-calculator button:focus-visible,
.lc-cost-calculator summary:focus-visible,
.lc-cost-calculator a:focus-visible {
    outline: 3px solid var(--lc-cost-focus);
    outline-offset: 3px;
}
.lc-cost-calculator input[aria-invalid="true"] { border-color: var(--lc-cost-danger); }

.lc-cost-calculator details {
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid #42658f;
}
.lc-cost-calculator summary { cursor: pointer; color: var(--lc-cost-cyan); font-weight: 750; overflow-wrap: anywhere; }
.lc-cost-calculator details .field { margin-block-start: 1rem; max-inline-size: 16rem; }
.lc-cost-calculator .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1rem; }

.lc-cost-calculator button,
.lc-cost-calculator .workbook-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding: .6rem 1rem;
    border: 2px solid var(--lc-cost-control-border);
    border-radius: .65rem;
    background: transparent;
    color: var(--lc-cost-text);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    text-decoration: none;
}

.lc-cost-calculator .outputs { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lc-cost-calculator .output-card { min-inline-size: 0; padding: 1rem; border-radius: .8rem; background: var(--lc-cost-navy-800); }
.lc-cost-calculator .output-card span { display: block; color: var(--lc-cost-muted); font-size: .83rem; overflow-wrap: anywhere; }
.lc-cost-calculator .output-card strong { display: block; margin-block-start: .2rem; color: var(--lc-cost-cyan); font-size: 1.55rem; overflow-wrap: anywhere; }
.lc-cost-calculator .cost-bar { display: flex; overflow: hidden; block-size: 1.15rem; max-inline-size: 100%; margin-block: 1rem .75rem; border-radius: 999px; background: #172944; }
.lc-cost-calculator .cost-bar__segment--base { background: var(--lc-cost-cyan); }
.lc-cost-calculator .cost-bar__segment--usage { background: var(--lc-cost-purple); }
.lc-cost-calculator .cost-bar__segment--setup { background: var(--lc-cost-lime); }
.lc-cost-calculator .legend { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.lc-cost-calculator .legend li { display: grid; grid-template-columns: .7rem minmax(0, 1fr) auto; gap: .55rem; align-items: center; }
.lc-cost-calculator .legend strong { overflow-wrap: anywhere; text-align: end; }
.lc-cost-calculator .swatch { inline-size: .7rem; block-size: .7rem; border-radius: 50%; }
.lc-cost-calculator .swatch--base { background: var(--lc-cost-cyan); }
.lc-cost-calculator .swatch--usage { background: var(--lc-cost-purple); }
.lc-cost-calculator .swatch--setup { background: var(--lc-cost-lime); }
.lc-cost-calculator .noscript-note { margin-block: 1rem 0; padding: 1rem; border: 2px solid var(--lc-cost-control-border); border-radius: .75rem; background: #0d2341; color: var(--lc-cost-text); }
.lc-cost-calculator .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lc-cost-calculator .workbook-companion { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid #42658f; }
.lc-cost-calculator .workbook-companion p { flex: 1 1 20rem; margin: 0; color: var(--lc-cost-muted); }

@media (max-width: 46rem) {
    .lc-cost-calculator .calculator-grid,
    .lc-cost-calculator .field-grid,
    .lc-cost-calculator .outputs { grid-template-columns: minmax(0, 1fr); }
    .lc-cost-calculator,
    .lc-cost-calculator .panel { padding-inline: 1rem; }
    .lc-cost-calculator .legend li { grid-template-columns: .7rem minmax(0, 1fr); }
    .lc-cost-calculator .legend strong { grid-column: 2; text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
    .lc-cost-calculator *,
    .lc-cost-calculator *::before,
    .lc-cost-calculator *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}