.brand-heading { align-items: center; gap: 20px; }
.brand-heading h1 { margin-bottom: 8px; }
.brand-heading p { max-width: 620px; }
.brand-pill { display: inline-block; flex-shrink: 0; padding: 8px 12px; color: #53704d; background: #edf3e7; border: 1px solid #dce7d4; border-radius: 30px; font-size: 11px; }
.brand-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 20px; }
.brand-steps button { display: flex; align-items: center; text-align: left; gap: 14px; background: #f8faf5; padding: 17px 20px; border: 1px solid #dfe7d8; border-radius: 10px; color: #6e8268; font: inherit; cursor: pointer; }
.brand-steps button[aria-current=step] { background: #245c49; border-color: #245c49; color: #fff; box-shadow: 0 4px 12px #245c4910; }
.brand-steps button > span { font-size: 13px; opacity: .75; }
.brand-steps strong { font-size: 14px; font-weight: 600; }
.brand-steps small { display: block; margin-top: 5px; font-size: 10px; font-weight: 400; opacity: .8; }
.brand-intro { margin: 0 0 24px; max-width: 850px; color: #7a8973; font-size: 12px; line-height: 1.9; }
.brand-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }
.brand-editor { min-width: 0; }
.brand-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.brand-fieldset:disabled { opacity: .6; }
.brand-question { background: #fff; padding: 28px; border: 1px solid #dfe7d8; border-radius: 12px; }
.brand-question-number { display: block; font-size: 9px; letter-spacing: 1.2px; color: #90a080; margin-bottom: 12px; }
.brand-question h2 { font-size: 21px; line-height: 1.45; margin: 0 0 22px; font-weight: 500; }
.brand-options { display: grid; gap: 9px; }
.brand-option { display: flex; align-items: flex-start; gap: 12px; padding: 15px; border: 1px solid #e2e8dc; border-radius: 8px; cursor: pointer; background: #fff; transition: background .15s, border-color .15s; }
.brand-option:hover { background: #fafcf7; border-color: #aabb9c; }
.brand-option.is-selected { background: #f2f7eb; border-color: #94b080; }
.brand-option input { margin: 3px 0 0; accent-color: #426d39; flex-shrink: 0; width: 15px; height: 15px; }
.brand-option > span { min-width: 0; }
.brand-option strong { display: block; color: #405c42; font-size: 12px; font-weight: 500; line-height: 1.6; }
.brand-option small { display: block; margin-top: 4px; font-size: 9px; color: #819571; line-height: 1.6; }
.brand-option p { margin: 7px 0 0; font-size: 11px; line-height: 1.8; color: #77866d; }
.brand-option-muted { background: #fcfdf9; border-style: dashed; }
.brand-option-muted strong { color: #7d8a74; }
.brand-field { display: grid; gap: 8px; margin: 17px 0; color: #63775a; font-size: 11px; line-height: 1.6; }
.brand-field input, .brand-field textarea, .brand-field select, .brand-progress select { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #dce5d3; border-radius: 7px; padding: 12px; background: #fcfdf9; color: #3c573e; font: inherit; font-size: 12px; line-height: 1.8; }
.brand-field textarea { resize: vertical; min-height: 90px; }
.brand-field input::placeholder, .brand-field textarea::placeholder { color: #a0aa97; font-size: 11px; }
#brand-root :focus-visible { outline: 2px solid #649147; outline-offset: 3px; }
.brand-hint { font-size: 11px; color: #87947a; line-height: 1.8; margin: 12px 0; }
.brand-effect { font-size: 11px; line-height: 1.8; color: #6b815e; background: #f5f8f0; border-radius: 7px; padding: 12px; margin: 20px 0 0; }
.brand-effect span { display: block; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: #93a285; margin-bottom: 4px; }
.brand-progress { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin-bottom: 16px; }
.brand-progress > span { color: #89977e; font-size: 11px; }
.brand-progress progress { width: 100%; height: 5px; border: 0; border-radius: 5px; accent-color: #69884f; }
.brand-progress progress::-webkit-progress-bar { background: #e7eddf; border-radius: 5px; }
.brand-progress progress::-webkit-progress-value { background: #7f9c62; border-radius: 5px; }
.brand-progress select { grid-column: 1 / -1; background: transparent; border-color: #e0e7d8; padding: 8px 11px; font-size: 10px; }
.brand-question-nav { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 24px; }
.brand-question-nav .button { font-size: 11px; }
.brand-summary { position: sticky; top: 20px; border: 1px solid #dce6d3; border-radius: 12px; background: #f6f8ef; padding: 24px; }
.brand-summary h2 { font-size: 19px; font-weight: 500; margin: 12px 0 22px; }
.brand-summary dl { margin: 0; }
.brand-summary dl > div, .brand-final-profile > div { margin: 0 0 15px; }
.brand-summary dt, .brand-final-profile dt { color: #8a997d; font-size: 9px; margin-bottom: 4px; }
.brand-summary dd, .brand-final-profile dd { font-size: 11px; line-height: 1.8; color: #506a44; margin: 0; overflow-wrap: anywhere; }
.brand-summary .brand-hint { border-top: 1px solid #dfe7d5; padding-top: 15px; margin-bottom: 0; font-size: 10px; }
.brand-save { border-top: 1px solid #dfe6d6; margin-top: 24px; padding: 22px 0; }
.brand-save strong { font-size: 12px; color: #617557; font-weight: 500; }
.brand-save p { font-size: 10px; line-height: 1.8; color: #8e9b80; margin: 8px 0 17px; }
.brand-save .local-actions { justify-content: flex-start; }
.brand-save .button { font-size: 11px; }
.brand-section-intro { margin-bottom: 22px; }
.brand-section-intro h2, .brand-calibration-intro h2 { font-size: 20px; font-weight: 500; }
.brand-section-intro p, .brand-calibration-intro p { font-size: 12px; line-height: 1.9; color: #839175; }
.brand-group { border: 1px solid #dfe7d7; border-radius: 9px; margin-bottom: 12px; background: #fff; }
.brand-group > summary { cursor: pointer; padding: 20px; color: #506944; font-size: 13px; }
.brand-group > summary span { float: right; font-size: 10px; color: #97a18c; }
.brand-group[open] > summary { border-bottom: 1px solid #e4eadc; }
.brand-group > div { padding: 0 20px; }
.brand-group .brand-question { border: 0; border-bottom: 1px solid #e7ecdf; border-radius: 0; padding: 25px 0; }
.brand-group .brand-question:last-child { border-bottom: 0; }
.brand-group .brand-question h2 { font-size: 17px; }
.brand-row { padding: 18px; border: 1px solid #e0e7d7; border-radius: 8px; background: #fcfdf9; margin: 15px 0; }
.brand-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand-row-heading strong { color: #69805b; font-size: 12px; }
.brand-row-heading .text-button { font-size: 10px; }
.brand-check { display: flex; gap: 9px; align-items: flex-start; color: #708363; font-size: 10px; line-height: 1.8; margin-top: 14px; }
.brand-check input { flex-shrink: 0; margin: 3px 0 0; accent-color: #64894a; }
.brand-issues { padding: 18px 22px; border: 1px solid #e9d6b5; background: #fff8ec; border-radius: 9px; margin: 20px 0; font-size: 12px; color: #917443; }
.brand-issues ul { padding-left: 20px; margin-bottom: 0; }
.brand-issues li { padding: 5px 0; }
.brand-issues button { text-align: left; font-size: 11px; color: #927241; line-height: 1.7; }
.brand-confirm { border: 1px solid #94b27a; padding: 25px; border-radius: 10px; background: #f1f7e9; margin: 24px 0; }
.brand-confirm h2 { font-size: 19px; font-weight: 500; }
.brand-confirm h3 { font-size: 16px; font-weight: 500; }
.brand-confirm p { color: #6d805e; font-size: 12px; line-height: 1.9; }
.brand-confirm details { font-size: 11px; margin: 20px 0; }
.brand-confirm summary { cursor: pointer; }
.brand-calibration-card { border: 1px solid #dfe7d7; border-radius: 12px; padding: 24px; background: #fff; margin: 22px 0; }
.brand-calibration-card h3 { font-size: 15px; font-weight: 500; }
.brand-calibration-card blockquote { padding: 16px 18px; margin: 20px 0; border-left: 3px solid #adc299; background: #f6f9f0; font-size: 12px; line-height: 1.8; color: #677b5b; }
.brand-variants { display: grid; gap: 12px; }
.brand-variants > article { padding: 17px; border: 1px solid #e3e9db; border-radius: 8px; }
.brand-variants p { font-size: 12px; color: #637858; line-height: 1.9; margin: 9px 0 16px; }
.brand-feedback { display: flex; flex-wrap: wrap; gap: 6px; }
.brand-feedback button { border: 1px solid #e0e7d8; border-radius: 5px; font: inherit; color: #7b8c6e; padding: 6px 9px; font-size: 9px; background: #fcfdf9; cursor: pointer; }
.brand-feedback button:first-child { color: #55773f; background: #eff5e6; border-color: #d6e3c7; }
.brand-feedback button:hover { border-color: #88a86b; }
#brand-root .local-alert small { display: block; font-size: 10px; margin-top: 8px; }
#brand-root .local-alert .text-button { display: block; margin-top: 8px; }
@media (min-width: 1600px) { .brand-layout { grid-template-columns: minmax(0, 860px) 350px; } }
@media (max-width: 1150px) { .brand-layout { grid-template-columns: minmax(0, 1fr); } .brand-summary { position: static; } .brand-summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; } .brand-heading { align-items: flex-start; flex-direction: column; } }
@media (max-width: 650px) { .brand-heading h1 { font-size: 30px; } .brand-steps { gap: 7px; } .brand-steps button { padding: 12px 9px; gap: 7px; } .brand-steps strong { font-size: 11px; } .brand-steps small { font-size: 8px; } .brand-steps button > span { font-size: 9px; } .brand-question { padding: 20px 17px; } .brand-question h2 { font-size: 19px; } .brand-question-nav { flex-wrap: wrap; } .brand-option { padding: 12px; } .brand-option strong { font-size: 11px; } .brand-summary { padding: 20px; } .brand-summary dl { grid-template-columns: 1fr; } .brand-calibration-card { padding: 18px; } .brand-group > div { padding: 0 15px; } .brand-save .local-actions .button { flex: 1; white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .brand-option { transition: none; } }