:root {
  --flux-page: #f7f8f6;
  --flux-surface: #ffffff;
  --flux-text: #202428;
  --flux-muted: #697078;
  --flux-action: #202428;
  --flux-action-hover: #343a40;
  --flux-accent: #287a61;
  --flux-accent-surface: #f0f5f2;
  --flux-border: #dde1e5;
  --flux-focus: #287a61;
  --flux-repair: #202428;
  --flux-replace: #202428;
  --flux-close: #697078;
  --flux-error: #9a3f3f;
  --flux-radius: .65rem;
  --flux-shadow: 0 1px 2px rgba(32, 36, 40, .04);
}

html { font-size: 14px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }
body { margin-bottom: 60px; background: var(--flux-page); color: var(--flux-text); }
.app-version { margin: -1.5rem auto 1.25rem; color: var(--flux-muted); font-size: .8rem; text-align: center; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 .2rem var(--flux-focus); }
.questionnaire-shell { max-width: 42rem; min-height: 100vh; padding: 1.25rem 1rem 2.5rem; }
.questionnaire-header { margin-bottom: 2rem; text-align: center; }
.flux-mark { margin-bottom: 1.25rem; color: var(--flux-text); font-size: 1.1rem; font-weight: 750; letter-spacing: .08em; }
.questionnaire-header h1 { color: var(--flux-text); font-size: clamp(2rem, 8vw, 3rem); line-height: 1.1; }
.questionnaire-header .lead { margin-bottom: 0; color: var(--flux-muted); }
.how-it-works { max-width: 30rem; margin: 1.25rem auto 0; color: var(--flux-muted); font-size: .9rem; text-align: left; }
.how-it-works summary { width: fit-content; margin: 0 auto; color: var(--flux-text); cursor: pointer; font-weight: 650; }
.how-it-works p { margin: .75rem 0 0; line-height: 1.55; }
.questionnaire-header.tool-mode { margin-bottom: .75rem; text-align: center; }
.questionnaire-header.tool-mode h1, .questionnaire-header.tool-mode .lead { display: none; }
.questionnaire-header.tool-mode .flux-mark { margin-bottom: 0; }
.question-step > .mb-3 { margin-bottom: 1.5rem !important; }
.question-step.short-step { min-height: calc(100svh - 12rem); display: flex; flex-direction: column; }
.short-step .step-actions { margin-top: auto; padding-bottom: env(safe-area-inset-bottom); }
.question-step .form-label { color: var(--flux-text); font-size: 1.15rem; font-weight: 600; }
.question-step .form-control, .question-step .form-select, .question-step textarea { min-height: 3.25rem; border-color: var(--flux-border); border-radius: var(--flux-radius); background: var(--flux-surface); color: var(--flux-text); font-size: 16px; box-shadow: var(--flux-shadow); }
.question-step textarea { min-height: auto; }
.question-step .form-control::placeholder, .question-step textarea::placeholder { color: var(--flux-muted); opacity: .7; }
.choice-list { display: grid; gap: .65rem; }
.appliance-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.choice-card { display: flex; align-items: center; min-height: 3.25rem; padding: .8rem 1rem; border: 1px solid var(--flux-border); border-radius: var(--flux-radius); background: var(--flux-surface); cursor: pointer; box-shadow: var(--flux-shadow); transition: border-color .15s ease, background-color .15s ease, transform .1s ease; }
.appliance-card { justify-content: center; min-height: 4.25rem; text-align: center; }
.choice-card:has(input:checked) { border-color: var(--flux-accent); background: var(--flux-accent-surface); box-shadow: inset .2rem 0 0 var(--flux-accent), var(--flux-shadow); }
.choice-card:active { transform: scale(.99); }
.choice-card input { margin-right: .5rem; }
.validation-message { min-height: 0; margin-top: .45rem; color: var(--flux-error); font-size: .9rem; }
.validation-message:not(.visible) { display: none; }
.progress-steps { display: flex; gap: .5rem; justify-content: center; }
.progress-step { width: 2rem; height: 2rem; border: 0; border-radius: 50%; color: var(--flux-muted); background: var(--flux-border); }
.progress-step.active { color: white; background: var(--flux-accent); }
.progress-step.completed { color: white; background: var(--flux-muted); cursor: pointer; }
.context-summary { min-height: 1.5rem; margin: .75rem auto 2rem; max-width: 42rem; color: var(--flux-muted); font-size: .95rem; text-align: center; }
.step-actions { display: flex; gap: .75rem; justify-content: space-between; margin-top: 1.5rem; }
.step-actions .btn-primary { flex: 1; }
.btn-primary { min-height: 3.25rem; border-color: var(--flux-action); border-radius: var(--flux-radius); background: var(--flux-action); color: white; font-weight: 650; }
.btn-primary:hover, .btn-primary:focus { border-color: var(--flux-action-hover); background: var(--flux-action-hover); color: white; }
.btn-outline-secondary { border-color: var(--flux-border); border-radius: var(--flux-radius); color: var(--flux-muted); background: var(--flux-surface); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { border-color: var(--flux-muted); color: var(--flux-text); background: var(--flux-surface); }
.btn-back { min-width: 5rem; min-height: 3.25rem; padding: .65rem .25rem; border: 1px solid transparent; color: var(--flux-muted); background: transparent; }
.btn-back:hover, .btn-back:focus { border-color: transparent; color: var(--flux-text); background: transparent; }
.btn:active { transform: translateY(1px); }
.progress-meta { display: flex; align-items: center; gap: .75rem; max-width: 12rem; margin: 0 auto; color: var(--flux-muted); font-size: .8rem; }
.progress-track { flex: 1; height: .2rem; overflow: hidden; border-radius: 1rem; background: var(--flux-border); }
.progress-track > div { height: 100%; background: var(--flux-accent); transition: width .25s ease; }
.step-exit { animation: step-out .12s ease both; }
@keyframes step-out { to { opacity: 0; transform: translateX(-.5rem); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 430px) { .questionnaire-shell { padding-top: 1rem; } .questionnaire-header { margin-bottom: 1.5rem; } .context-summary { margin-bottom: 1.25rem; font-size: .95rem; } .choice-card { padding: .75rem .85rem; } .appliance-choices { gap: .6rem; } }
@media (max-width: 767px) { .short-step { min-height: auto; } .short-step .step-actions { margin-top: 1.25rem; } }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--flux-muted); text-align: end; }
.result-experience { max-width: 42rem; margin: 2rem auto 0; color: var(--flux-text); }
.result-recap { padding-bottom: 1.25rem; border-bottom: 1px solid var(--flux-border); }
.result-product { margin: 0 0 .75rem; color: var(--flux-muted); font-size: .9rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.result-scenario { margin: 0; font-size: 1.15rem; font-weight: 650; }
.result-costs { margin: .3rem 0 0; color: var(--flux-muted); }
.result-advice { padding: 1.5rem 0 1rem 1rem; border-left: .3rem solid var(--flux-accent); }
.result-repair .result-advice, .result-replace .result-advice { border-left-color: var(--flux-accent); }
.result-unknown .result-advice { border-left-color: var(--flux-muted); }
.result-eyebrow { margin: 0 0 .45rem; color: var(--flux-muted); font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.result-advice h2 { margin: 0; font-size: clamp(2.1rem, 10vw, 3.5rem); line-height: 1.05; }
.result-close { display: inline-block; margin: .8rem 0 0; padding: .3rem .6rem; border-radius: 999px; color: var(--flux-close); background: var(--flux-accent-surface); font-size: .88rem; font-weight: 700; }
.result-explanation { max-width: 38rem; margin: 1.25rem 0 0; color: var(--flux-text); font-size: 1.05rem; line-height: 1.65; }
.tipping-point { margin: .75rem 0 1.25rem; padding: 1rem; border: 1px solid var(--flux-border); border-radius: var(--flux-radius); background: var(--flux-surface); }
.tipping-amount { margin: 0; font-size: 1.55rem; font-weight: 750; }
.tipping-copy { margin: .25rem 0 0; color: var(--flux-muted); }
.result-score { margin: 1.25rem 0; color: var(--flux-muted); font-size: .88rem; }
.result-actions { display: flex; align-items: center; gap: .75rem; }
.result-actions .btn-primary { flex: 0 1 auto; }
.result-actions .btn-link { color: var(--flux-muted); }
@media (max-width: 430px) { .result-experience { margin-top: 1.25rem; } .result-advice h2 { font-size: clamp(2rem, 11vw, 3rem); } .result-explanation { font-size: 1rem; } .result-actions { align-items: stretch; flex-direction: column; } .result-actions .btn-primary { width: 100%; } }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }
.short-step .input-group { max-width: 28rem; }
.short-step .input-group .form-control { min-height: 4rem; font-size: 1.5rem; font-weight: 600; }
.short-step .input-group-text { min-height: 4rem; border-color: var(--flux-border); background: var(--flux-surface); color: var(--flux-muted); font-size: 1.1rem; }
.product-disclaimer { max-width: 42rem; margin: 1.5rem auto; padding: 0 1rem; color: var(--flux-muted); font-size: .8rem; line-height: 1.5; text-align: center; }
.error-page { max-width: 38rem; margin: 4rem auto; text-align: center; }
.error-page h1 { margin-bottom: .75rem; }
.error-page > p:not(.flux-mark) { margin-bottom: 1.5rem; color: var(--flux-muted); }