:root {
    color-scheme: light;

    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --color-bg-page: #fbf7ef;
    --color-surface: #ffffff;
    --color-surface-sunk: #f4eee3;
    --color-surface-muted: #f7f2ff;
    --color-surface-plum: #1e1330;
    --color-text: #221a2e;
    --color-text-subtle: #4e4260;
    --color-text-muted: #6b6079;
    --color-text-on-plum: #fbf7ef;
    --color-text-on-plum-muted: #d8cde5;
    --color-border: #ded7e8;
    --color-border-strong: #9c92a8;
    --color-border-hover: #756a82;
    --color-accent: #6c2bd9;
    --color-accent-hover: #5720b6;
    --color-accent-soft: #f1e9ff;
    --color-accent-text: #4d2589;
    --color-error: #a11231;
    --color-danger-hover: #7d0d27;
    --color-danger-soft: #fff5f7;
    --color-danger-border: #d9a7b2;
    --color-focus: #ffb000;
    --color-focus-outer: var(--color-text);
    --focus-ring-shadow: 0 0 0 3px var(--color-focus), 0 0 0 6px var(--color-focus-outer);

    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-result: clamp(2.25rem, 8vw, 4rem);

    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    --control-block-size: 3rem;
    --control-padding-inline: .75rem;
    --radius-control: .75rem;
    --radius-button: .8rem;
    --radius-card: 1rem;
    --shadow-card: 3px 3px 0 rgba(108, 43, 217, .12);
    --shadow-result: 4px 4px 0 rgba(108, 43, 217, .18);
    --content-wide: 72rem;
    --content-calculator: 48rem;

    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg-page);
}

* { box-sizing: border-box; }
html { background: var(--color-bg-page); }
body { margin: 0; color: var(--color-text); background: var(--color-bg-page); }
a { color: var(--color-accent); }
button, input, select { font: inherit; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}
.skip-link:focus {
    left: var(--space-4);
    top: var(--space-4);
    z-index: 10;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
}

.site-header, .site-footer, .page-shell {
    width: min(var(--content-wide), calc(100% - 2rem));
    margin-inline: auto;
}
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-4);
}
.site-header nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: var(--weight-bold);
    text-decoration: none;
}
.brand:hover { color: var(--color-text); }
.brand__mark {
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 auto;
    overflow: visible;
}
.brand__key { fill: currentColor; }
.brand__key--loose { fill: var(--color-accent); }
.brand:hover .brand__key--loose { fill: var(--color-accent-hover); }
.page-shell { padding-block: var(--space-12); }
.site-footer {
    margin-block: var(--space-12) var(--space-4);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-card);
    color: var(--color-text-on-plum-muted);
    background: var(--color-surface-plum);
}
.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-4);
}
.site-footer a {
    color: var(--color-text-on-plum);
    font-weight: var(--weight-semibold);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}
.site-footer a:hover { color: var(--color-surface); }
.site-footer a:focus-visible {
    box-shadow:
        0 0 0 3px var(--color-focus),
        0 0 0 6px var(--color-text-on-plum);
}
.site-footer p { margin: 0; color: var(--color-text-on-plum-muted); }

.hero { max-width: var(--content-calculator); padding-block: 4rem; }
.eyebrow { font-weight: var(--weight-bold); color: var(--color-accent); }
h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.02; margin: 0 0 var(--space-4); }
h2 { line-height: 1.15; }
.hero-copy { font-size: 1.25rem; color: var(--color-text-subtle); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-block-size);
    padding: .7rem var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}
.button-primary { color: white; background: var(--color-accent); text-decoration: none; }
.button-primary:hover { background: var(--color-accent-hover); }
.button-secondary { color: var(--color-accent-text); background: var(--color-accent-soft); }
.button-danger { color: white; background: var(--color-error); }
.button-danger:hover { background: var(--color-danger-hover); }
.button:focus-visible,
.control:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
.result-card:focus-visible,
.form-error:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--focus-ring-shadow);
}
.button:disabled { cursor: not-allowed; opacity: .65; }

.breadcrumbs { display: flex; gap: var(--space-2); margin-bottom: var(--space-8); font-size: .925rem; }
.calculator-page { max-width: var(--content-calculator); }
.calculator-page > header p { font-size: 1.1rem; color: var(--color-text-subtle); }

.calculator-card,
.form-card,
.result-card,
.feedback-prompt {
    margin-block: var(--space-8);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.field-grid,
.form-row,
.discount-primary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-4);
}

.field,
.form-field {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
}

.field label,
.form-field__label {
    min-height: 1.5rem;
    font-weight: var(--weight-semibold);
}

.control,
.field input,
.field select,
.money-currency-select {
    width: 100%;
    min-width: 0;
    min-height: var(--control-block-size);
    padding: .65rem var(--control-padding-inline);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control);
    color: var(--color-text);
    background: var(--color-surface);
}

.control:hover,
.field input:hover,
.field select:hover,
.money-currency-select:hover {
    border-color: var(--color-border-hover);
}

.control[aria-invalid="true"],
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.money-currency-select[aria-invalid="true"] {
    border-color: var(--color-error);
    box-shadow: 0 0 0 1px rgba(161, 18, 49, .18);
}

.control[aria-invalid="true"]:focus-visible,
.field input[aria-invalid="true"]:focus-visible,
.field select[aria-invalid="true"]:focus-visible,
.money-currency-select[aria-invalid="true"]:focus-visible {
    box-shadow: var(--focus-ring-shadow);
}

.form-field__support,
.form-field__errors {
    display: grid;
    align-content: start;
    gap: var(--space-1);
}
.form-field__support { min-height: 2.75rem; }
.form-field__errors { min-height: 1.5rem; }

.field-help,
.form-field__help {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.field-error,
.form-field__error,
.form-error {
    color: var(--color-error);
    font-weight: var(--weight-semibold);
}
.field-error,
.form-field__error { min-height: 1.5rem; margin: 0; }
.form-error { margin: 0 0 var(--space-4); }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.calculator-card > .button { margin-top: var(--space-5); }
.form-actions > .button { margin-top: 0; }

.money-input-labels,
.money-input-group,
.control-group {
    display: grid;
    grid-template-columns: minmax(7.25rem, 9.5rem) minmax(0, 1fr);
}
.money-input-labels { align-items: end; gap: 0; }
.money-currency-label { padding-left: var(--control-padding-inline); white-space: nowrap; }
.money-input-group .money-currency-select,
.control-group > :first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); text-overflow: ellipsis; }
.money-input-group input,
.control-group > :last-child { border-left: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.money-input-group > :focus-visible,
.control-group > :focus-visible { position: relative; z-index: 1; outline-offset: 0; }
.currency-help { max-width: 44rem; }

.result-card { min-height: 14rem; }
.result-card[data-result-ready="true"] {
    position: relative;
    box-shadow: var(--shadow-result);
}
.result-card[data-result-ready="true"]::before,
.result-card[data-result-ready="true"]::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.result-card[data-result-ready="true"]::before {
    top: 1.05rem;
    right: 1.15rem;
    width: .58rem;
    height: .58rem;
    border-radius: .18rem;
    background: var(--color-accent);
    transform: rotate(18deg);
    box-shadow:
        -1.3rem .35rem 0 -.08rem var(--color-focus),
        -2.3rem -.05rem 0 -.14rem var(--color-accent);
    opacity: .78;
}
.result-card[data-result-ready="true"]::after {
    top: 2.15rem;
    right: 2.55rem;
    width: .82rem;
    height: .34rem;
    border-radius: 999px;
    background: var(--color-focus);
    transform: rotate(-24deg);
    opacity: .8;
}
.result-label,
.result-card__label { margin: 0; color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.result-primary,
.result-card__primary {
    margin: var(--space-1) 0;
    font-size: var(--text-result);
    line-height: 1.05;
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}
.result-summary,
.result-card__summary { max-width: 40rem; font-size: 1.2rem; }
.result-details,
.result-card__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-3);
}
.result-details div,
.result-card__metrics > div { padding: var(--space-3); border-radius: .7rem; background: var(--color-surface-muted); }
.result-details dt,
.result-card__metrics dt { color: var(--color-text-muted); }
.result-details dd,
.result-card__metrics dd {
    margin: .2rem 0 0;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.result-placeholder { max-width: 32rem; color: var(--color-text-muted); }
.discount-result { min-height: 16rem; }
.result-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: calc(var(--space-8) * -0.5) 0 var(--space-8);
}
.result-actions p { margin: 0; color: var(--color-text-subtle); }

.content-section { margin-block: var(--space-12); }
.formula-display { padding: .8rem var(--space-4); border-left: .25rem solid var(--color-accent); background: var(--color-surface-sunk); }
.home-problem-card { max-width: var(--content-calculator); margin-top: var(--space-8); padding: var(--space-6); border-radius: var(--radius-card); background: var(--color-surface-sunk); }
.calculator-scenario-link { max-width: var(--content-calculator); }

.auth-page { max-width: 36rem; }
.auth-card { display: grid; gap: var(--space-4); }
.auth-card .form-actions { margin-top: var(--space-2); }
.auth-alternative { margin-top: calc(var(--space-8) * -0.5); color: var(--color-text-subtle); }
.flash-message {
    margin-block: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
    font-weight: var(--weight-semibold);
}
.account-empty-state {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}
.account-empty-state .button { margin-top: var(--space-3); }
.saved-calculation-list { display: grid; gap: var(--space-4); }
.saved-calculation-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}
.saved-calculation-card h3 { margin: var(--space-1) 0; }
.saved-calculation-card p { margin-block: var(--space-2); }
.saved-calculation-card__meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.saved-calculation-card__primary {
    font-size: 1.5rem;
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}
.saved-calculation-context dl { display: grid; gap: var(--space-3); }
.saved-calculation-context dl > div { padding: var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.saved-calculation-context dt { color: var(--color-text-muted); }
.saved-calculation-context dd { margin: var(--space-1) 0 0; font-weight: var(--weight-semibold); }
.danger-zone {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}
.danger-card {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
}

@media (forced-colors: active) {
    .button:focus-visible,
    .control:focus-visible,
    input:focus-visible,
    select:focus-visible,
    a:focus-visible,
    .result-card:focus-visible,
    .form-error:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}

@media (max-width: 40rem) {
    .page-shell { padding-block: var(--space-8); }
    .site-header { align-items: center; }
    .brand { font-size: 1.15rem; }
    .brand__mark { width: 2rem; height: 2rem; }
    .site-footer { padding: var(--space-6) var(--space-5); }
    .field-grid,
    .form-row,
    .discount-primary-grid { grid-template-columns: 1fr; }
    .form-field__support,
    .form-field__errors { min-height: 0; }
    .field-error:empty,
    .form-field__error:empty { min-height: 0; }
    .form-actions .button-primary,
    .form-actions .button-danger,
    .result-actions .button { width: 100%; }
    .result-actions,
    .saved-calculation-card { align-items: stretch; flex-direction: column; }
    .saved-calculation-card .button { width: 100%; }
    .calculator-card,
    .form-card,
    .result-card,
    .feedback-prompt { padding: var(--space-5); }
    h1 { font-size: 2.5rem; }
}

@media (max-width: 22rem) {
    .site-header, .site-footer, .page-shell { width: min(var(--content-wide), calc(100% - 1rem)); }
    .calculator-card,
    .form-card,
    .result-card,
    .feedback-prompt { padding: var(--space-4); }
    .money-input-labels,
    .money-input-group,
    .control-group { grid-template-columns: minmax(6.5rem, 7.5rem) minmax(0, 1fr); }
    .result-card[data-result-ready="true"]::before,
    .result-card[data-result-ready="true"]::after { display: none; }
}