:root {
  --flux-page: #f7f8f6;
  --flux-surface: #ffffff;
  --flux-text: #202428;
  --flux-muted: #697078;
  --flux-accent: #356b5a;
  --flux-action: #356b5a;
  --flux-action-hover: #2b5749;
  --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); }
a { color: var(--flux-accent); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:visited { color: var(--flux-accent); }
a:hover { color: #21664f; }
a:focus-visible { outline: .18rem solid var(--flux-focus); outline-offset: .15rem; }
.btn, .navbar-brand { text-decoration: none; }
.flux-site-nav .container { justify-content: center; }
.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-shell:has(+ .seo-intro) { min-height: auto; }
.questionnaire-header { margin-bottom: 2rem; text-align: center; }
.flux-mark { margin-bottom: 1.25rem; color: var(--flux-accent); 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 { display: block; }
.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: 3.5rem; padding-top: .65rem; padding-bottom: .65rem; 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:link, .btn-primary:visited { color: white; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { 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; } }
.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); }
.flux-header-brand, .flux-header-brand:visited { color: var(--flux-accent); font-size: 1.05rem; font-weight: 750; letter-spacing: .04em; }
.flux-header-brand:hover, .flux-header-brand:focus { color: var(--flux-action-hover); }
.guide-nav { margin-top: 2rem; text-align: center; color: var(--flux-muted); font-size: .85rem; }
.guide-nav-label, .guide-nav-links, .guide-nav-secondary { display: block; }
.guide-nav-label { margin-bottom: .2rem; font-size: .78rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.guide-nav a, .guide-nav a:visited { color: var(--flux-muted); }
.guide-nav a:hover, .guide-nav a:focus { color: var(--flux-text); }
.guide-nav-secondary { margin-top: .45rem; }
.site-attribution { display: block; color: var(--flux-muted); font-size: .8rem; text-align: center; }
.guide-page { max-width: 46rem; margin: 2.5rem auto 3rem; padding: 0 1rem; line-height: 1.65; }
.guide-page h1 { max-width: 38rem; margin: 0 auto 1rem; line-height: 1.15; }
.guide-page h2 { margin: 2.25rem 0 .65rem; font-size: 1.35rem; line-height: 1.25; }
.guide-page .lead { margin-bottom: 1.25rem; }
.guide-page ul { margin: .5rem 0 1rem; padding-left: 1.35rem; }
.guide-page li + li { margin-top: .35rem; }
.guide-page .sources { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--flux-border); color: var(--flux-muted); font-size: .9rem; }
.guide-page .sources h2 { margin: 0 0 .5rem; color: var(--flux-text); font-size: 1rem; }
.guide-page .sources p { margin-bottom: .5rem; }
.guide-page .guide-nav { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--flux-border); }
.guide-page .btn-primary { min-height: 2.85rem; padding: .65rem 1.1rem; border-color: var(--flux-accent); background: var(--flux-accent); font-size: .95rem; }
.guide-page .btn-primary:hover, .guide-page .btn-primary:focus { border-color: var(--flux-action-hover); background: var(--flux-action-hover); }
.guide-nav { line-height: 1.8; }
.guide-page > p:first-of-type + p { margin-top: 1rem; }
.seo-intro { max-width: 42rem; margin: 1rem auto 1.5rem; padding: 0 1rem; text-align: center; }
.seo-intro h2 { margin-bottom: .5rem; font-size: 1.25rem; }
.seo-intro p { margin-bottom: .65rem; color: var(--flux-muted); }
.homepage-guide-links { color: var(--flux-muted); font-size: .9rem; line-height: 1.8; }
.homepage-guide-links a { color: inherit; }