.spinning-top { display: block; width: 100%; height: auto; overflow: visible; }
.spinning-top-body { transform-origin: 40px 73px; }
.brand-mark { width: 38px; height: 38px; }
.brand:hover .brand-mark { transform: none; }
.brand:hover .spinning-top-body, .brand:focus-visible .spinning-top-body, .install-card:hover .spinning-top-body, .self-home-card:hover .spinning-top-body { animation: top-spin 1.2s cubic-bezier(.16,.65,.2,1); }
.compass-summary.celebrate .spinning-top-body { animation: top-spin 1.2s cubic-bezier(.16,.65,.2,1); }
.compass-toy { transform: rotate(8deg); }
.self-home-symbol { height: auto; flex-shrink: 0; }
.reflection-card { display: flex; gap: 0; }
.reflection-card h3 { font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -.3px; margin: 17px 0 10px; }
.reflection-card > p { flex: none; min-height: 38px; margin-bottom: 18px; }
.suggestion-guide { display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; font-size: 10px; color: #777e71; line-height: 1.7; }
.suggestion-guide small { font-size: 9px; color: #899180; }
.suggestion-guide strong { font-size: 12px; color: #69745e; font-weight: 550; }
.suggestion-options { display: flex; flex-direction: column; gap: 7px; }
.suggestion-chip { display: flex; gap: 9px; align-items: center; justify-content: space-between; text-align: left; min-height: 42px; border: 1px solid #e1e6da; border-radius: 10px; padding: 10px 12px; background: #fafbf7; color: #65715e; font-size: 11px; line-height: 1.5; transition: background .15s, border-color .15s; }
.suggestion-chip:hover { border-color: #a9b79b; background: #f3f7ec; }
.suggestion-chip .icon { width: 13px; height: 13px; flex-shrink: 0; color: #96a28b; }
.suggestion-chip.selected { background: #edf3e5; border-color: #8fa67a; color: #4e6741; box-shadow: inset 0 0 0 1px #8fa67a40; }
.suggestion-chip.selected .icon { color: #63864e; }
.reflection-1 .suggestion-chip.selected { background: #f0ebf7; border-color: #ab96c0; color: #776088; box-shadow: inset 0 0 0 1px #ab96c040; }
.reflection-2 .suggestion-chip.selected { background: #fcf0e4; border-color: #d0a888; color: #967051; box-shadow: inset 0 0 0 1px #d0a88840; }
.note-editor { border-top: 1px dashed #e1e5dc; padding-top: 12px; margin-top: 18px; }
.note-editor summary { cursor: pointer; font-size: 11px; color: #7b826f; padding: 6px 0; }
.note-editor summary small { font-size: 9px; color: #9a9f91; margin-left: 7px; }
.note-editor summary:hover { color: #4e6741; }
.note-editor summary:focus-visible { outline: 3px solid #b75d39; outline-offset: 4px; border-radius: 3px; }
.note-editor textarea { margin-top: 13px; min-height: 90px; }
.note-editor .voice-note { margin-top: 10px; font-size: 11px; min-height: 36px; }
.reflection-card .note-editor { margin-top: 18px; }
.intention-card h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 9px 0 8px; line-height: 1.3; }
.intention-card .suggestion-guide { margin-top: 18px; }
.intention-card .suggestion-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.intention-card .suggestion-chip { background: #fffdf6; border-color: #e4dac0; color: #82724f; }
.intention-card .suggestion-chip.selected { background: #f8edcc; border-color: #bca168; box-shadow: inset 0 0 0 1px #bca16840; }
.intention-card .note-editor summary { font-family: var(--sans); }
.intention-card .note-editor label.sr-only { font-size: 12px; }
.scenario-picker { padding: 19px; margin: 0 0 26px; border: 1px solid #e3decf; background: #fcf8ee; border-radius: 15px; }
.scenario-options { display: flex; flex-wrap: wrap; gap: 9px; }
.scenario-chip { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 10px 13px; border: 1px solid #e7dcc7; border-radius: 10px; font-size: 11px; color: #877349; background: #fffef8; }
.scenario-chip .icon { width: 14px; height: 14px; }
.scenario-chip:hover, .scenario-chip[aria-pressed="true"] { border-color: #bf9e6d; background: #f8edce; }
.field-heading .text-link { font-size: 10px; min-height: 36px; }
.voice-field-button { min-width: 36px; min-height: 40px; padding: 8px; color: #92866f; }
.option-input-row input { min-width: 0; }
.settings-content { max-width: 1200px; margin: auto; padding: 43px 44px; }
.settings-content .page-title { margin-bottom: 15px; }
.settings-intro { color: #7c8575; font-size: 12px; margin-bottom: 30px; }
.install-card { display: flex; align-items: center; gap: 28px; border: 1px solid #e9dfbf; background: #fff5d8; border-radius: 22px; padding: 28px 32px; }
.install-brand { width: 98px; flex-shrink: 0; transform: rotate(-9deg); }
.install-card .eyebrow { font-size: 8px; color: #8e7a4f; }
.install-card h2 { font-family: var(--serif); font-weight: 400; font-size: 29px; line-height: 1.2; margin: 10px 0; }
.install-card p { font-size: 12px; color: #867a60; line-height: 1.8; max-width: 530px; }
.install-card .button { margin-top: 19px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; margin-top: 23px; }
.settings-card { border: 1px solid #e5e8df; border-radius: 18px; background: white; padding: 27px; }
.settings-card h2 { font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.25; margin: 18px 0 14px; }
.settings-card p, .settings-about p { font-size: 12px; color: #7a8273; line-height: 1.8; margin: 10px 0; }
.settings-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.settings-actions .button { font-size: 11px; }
.settings-about { display: flex; gap: 30px; border-top: 1px solid #e5e7df; margin-top: 28px; padding-top: 26px; }
.settings-about > div:first-child { flex: 1; }
.settings-about h2 { font-size: 16px; }
.settings-about .settings-actions { margin-top: 0; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 110px; }
.restore-choice { display: flex; align-items: flex-start; gap: 11px; font-size: 12px; line-height: 1.8; padding: 17px; border: 1px solid #e2e6d9; background: #f6f8f1; border-radius: 10px; margin-top: 18px; }
.restore-choice input { margin-top: 5px; }
#restore-error { color: #ac5a44; font-size: 12px; }
#voice-dialog { border: 1px solid #e5dfd3; border-radius: 22px; background: #fffdf8; width: calc(100% - 32px); max-width: 510px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px; color: var(--ink); box-shadow: 0 20px 80px #33332226; }
#voice-dialog::backdrop { background: #2d352f66; backdrop-filter: blur(4px); }
#voice-dialog h2 { font-family: var(--serif); font-size: 32px; font-weight: 400; margin: 10px 0; }
.voice-symbol { width: 37px; height: 37px; border-radius: 12px; background: #eee8f4; color: #9277a6; display: grid; place-items: center; }
.voice-privacy { background: #f3f1eb; border-radius: 10px; font-size: 11px; line-height: 1.75; color: #827966; padding: 13px 15px; margin: 15px 0 20px; }
#voice-language { width: 100%; min-height: 44px; border: 1px solid #dddccd; background: #fff; border-radius: 9px; padding: 10px; font: inherit; font-size: 13px; color: #656957; }
.voice-controls { display: flex; gap: 10px; margin: 19px 0 12px; }
#voice-status { font-size: 12px; color: #7e6e8b; min-height: 38px; line-height: 1.6; margin-bottom: 13px; }
#voice-transcript { width: 100%; resize: vertical; min-height: 105px; padding: 13px; border: 1px solid #e0d9e8; background: #fff; font: inherit; font-size: 13px; line-height: 1.7; border-radius: 10px; }
#voice-interim { font-size: 12px; color: #9c90a4; min-height: 18px; margin-top: 6px; }
.is-listening .voice-symbol { background: #f4e1d7; color: #b5694c; box-shadow: 0 0 0 5px #f4e1d766; }
#connection-status, #app-update { position: fixed; z-index: 40; border: 1px solid #d8dfcb; background: #f6faef; color: #5d7051; border-radius: 12px; box-shadow: 0 5px 20px #24332112; font-size: 12px; line-height: 1.6; padding: 14px 18px; }
#connection-status { bottom: 14px; right: 18px; max-width: 360px; }
#app-update { top: 14px; right: 18px; max-width: 330px; }
#app-update button { margin-left: 10px; color: #ad6548; background: transparent; font: inherit; text-decoration: underline; min-height: 32px; }
[hidden] { display: none !important; }
@keyframes top-spin { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(9deg); } 40% { transform: rotate(-6deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-2deg); } }
@media(max-width: 1150px) { .settings-content { padding: 35px 30px; } .reflection-card h3 { font-size: 22px; } .suggestion-chip { font-size: 11px; padding: 9px 10px; } }
@media(max-width: 950px) { .reflection-grid { grid-template-columns: 1fr; } .reflection-card { display: block; padding: 23px; } .reflection-card h3 { margin-top: 15px; font-size: 25px; } .reflection-card > p { min-height: 0; margin-bottom: 15px; } .reflection-card .suggestion-options { display: grid; grid-template-columns: 1fr 1fr; } .settings-grid { grid-template-columns: 1fr; } .install-card { padding: 25px; gap: 22px; } .install-card h2 { font-size: 26px; } .install-brand { width: 75px; } }
@media(max-width: 730px) { .sidebar { position: sticky; top: 0; min-height: 65px; background: #fbfaf7f2; z-index: 30; padding: 14px 22px; border-bottom: 1px solid #e9e7df; } .sidebar .brand { font-size: 30px; } .sidebar .brand-mark { width: 35px; height: 35px; } .sidebar nav { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; border-top: 1px solid #e6e8df; background: #fffefb; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -3px 18px #30332105; } .sidebar nav .nav-link { display: flex; flex-direction: column; justify-content: center; gap: 5px; font-size: 10px; min-height: 53px; padding: 8px 3px; border-radius: 11px; text-align: center; } .sidebar nav .nav-link .icon { width: 20px; height: 20px; } .sidebar nav .nav-link .count { display: none; } .workspace { padding-bottom: calc(79px + env(safe-area-inset-bottom)); } .topbar { height: 55px; } .self-content { padding-top: 23px; } .settings-content { padding: 27px 22px; } .settings-content .page-title { font-size: 38px; } .settings-about { display: block; } .settings-about .settings-actions { flex-direction: row; margin-top: 18px; gap: 22px; } .toast { bottom: calc(94px + env(safe-area-inset-bottom)); } #connection-status { bottom: calc(88px + env(safe-area-inset-bottom)); left: 14px; right: 14px; max-width: none; } .settings-actions .text-link { min-height: 42px; } }
@media(max-width: 510px) { .reflection-card { padding: 22px 19px; } .reflection-card .suggestion-options { gap: 8px; } .suggestion-chip { min-height: 48px; padding: 10px; font-size: 11px; gap: 5px; } .suggestion-chip .icon { width: 12px; height: 12px; } .intention-card { padding: 22px 18px; gap: 10px; } .intention-card h3 { font-size: 24px; } .intention-card .suggestion-options { grid-template-columns: 1fr; } .intention-star { display: none; } .note-editor textarea { font-size: 16px; } .scenario-picker { padding: 16px; } .scenario-options { gap: 7px; } .scenario-chip { font-size: 11px; padding: 10px; } .field-heading { gap: 10px; } .field-heading .text-link { font-size: 10px; } .field-heading .field-label { max-width: 165px; } .voice-field-button { min-width: 32px; padding: 6px; } .install-card { display: block; padding: 25px; } .install-brand { display: block; width: 64px; margin-bottom: 19px; } .install-card h2 { font-size: 29px; } .settings-card { padding: 24px; } #voice-dialog { padding: 23px; } #voice-dialog .button { font-size: 12px; } #voice-transcript { font-size: 16px; } .option-input-row { gap: 7px; } .option-input-row .text-input { padding-left: 10px; padding-right: 10px; } }
@media(prefers-reduced-motion: reduce) { .spinning-top-body { animation: none !important; } }
/* Direction, answer tracking, and transparent MaxDiff review. */
.about-me-section { padding: 26px; border: 1px solid var(--brand-blue-border); background: #fffdf8; border-radius: 20px; margin: 30px 0; }
.about-me-section .section-heading .eyebrow { color: var(--brand-blue); margin-bottom: 10px; display: block; }
.about-me-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-me-card { min-width: 0; border: 0; margin: 0; padding: 0; }
.about-me-card legend { padding: 0; font-size: 16px; font-weight: 600; }
.about-me-card > p, .context-explanation { color: #59647a; font-size: 12px; line-height: 1.75; }
.about-me-card > p { margin: 8px 0 14px; }
.about-me-section .note-editor { margin-top: 24px; }
.about-me-section textarea { width: 100%; }
.about-me-section .context-explanation { margin-top: 18px; }
.about-me-card .suggestion-chip { min-height: 46px; background: #fff; color: #334563; border-color: #dae2f3; }
.about-me-card .suggestion-chip.selected { color: var(--brand-blue-dark); background: var(--brand-blue-soft); border-color: var(--brand-blue); }
.profile-review-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px; margin-top: 25px; border-radius: 15px; background: var(--brand-blue-soft); border: 1px solid var(--brand-blue-border); }
.profile-review-card h2 { font-size: 17px; }
.profile-review-card p { font-size: 12px; line-height: 1.7; color: #52668d; margin-top: 6px; }
.profile-review-card .button { flex-shrink: 0; }
.answer-tracker { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; margin: 20px 0; border: 1px solid var(--brand-blue-border); border-radius: 14px; background: var(--brand-blue-soft); }
.answer-tracker > div { display: flex; flex-direction: column; gap: 5px; }
.answer-tracker strong { font-size: 13px; color: var(--brand-blue-dark); }
.answer-tracker span { color: #52668d; font-size: 11px; }
.answer-tracker .saved-note { margin: 0; }
.answer-tracker .text-link { font-size: 12px; min-height: 30px; }
.answer-edit-warning { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.7; color: #80451f; padding: 15px; border-radius: 11px; border: 1px solid var(--brand-orange-border); background: var(--brand-orange-soft); margin: 18px 0; }
.answer-edit-warning .icon { flex-shrink: 0; margin-top: 2px; }
.direction-panel { margin: 22px 0; padding: 18px; border-radius: 14px; border: 1px solid var(--brand-blue-border); background: #f6f8ff; }
.direction-panel .section-heading { margin-bottom: 17px; gap: 14px; align-items: flex-start; }
.direction-panel .section-heading h2 { font-size: 17px; }
.direction-panel .section-heading p { font-size: 12px; margin-top: 7px; line-height: 1.7; }
.direction-panel .text-link { font-size: 11px; flex-shrink: 0; }
.direction-suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.direction-suggestion { background: white; border-radius: 12px; border: 1px solid #dbe3f4; padding: 15px; display: flex; flex-direction: column; }
.direction-suggestion h3 { font-size: 14px; }
.direction-suggestion p { color: #59647a; font-size: 12px; line-height: 1.7; margin: 8px 0; }
.direction-suggestion small { display: block; color: var(--brand-blue-dark); font-size: 11px; line-height: 1.7; margin-bottom: 13px; }
.direction-suggestion label { font-size: 11px; margin-top: auto; margin-bottom: 7px; }
.direction-suggestion select { width: 100%; min-height: 44px; font: inherit; font-size: 12px; color: var(--ink); border: 1px solid #d1daf0; border-radius: 8px; background: white; padding: 8px; }
.direction-suggestion .button { font-size: 11px; min-height: 42px; margin-top: 10px; }
.direction-panel > .context-explanation { margin-top: 14px; }
.direction-empty { display: flex; gap: 12px; padding: 18px; margin: 20px 0; background: var(--brand-blue-soft); border-radius: 12px; }
.direction-empty > .icon { color: var(--brand-blue); flex-shrink: 0; }
.direction-empty strong { font-size: 13px; }
.direction-empty p { font-size: 12px; line-height: 1.7; margin: 7px 0; color: #59647a; }
.maxdiff-explainer { margin: 0 0 20px; border: 1px solid var(--brand-blue-border); border-radius: 11px; padding: 12px 15px; background: var(--brand-blue-soft); }
.maxdiff-explainer summary { cursor: pointer; font-size: 12px; color: var(--brand-blue-dark); min-height: 24px; }
.maxdiff-explainer p { font-size: 12px; line-height: 1.8; color: #52668d; margin-top: 10px; }
.round-progress { gap: 12px; flex-wrap: wrap; }
.round-progress > div { display: flex; gap: 5px; }
.round-progress button { min-width: 30px; height: 32px; background: #f0f2f7; border: 1px solid #d7deec; border-radius: 8px; color: #5a6d8b; font: inherit; font-size: 11px; }
.round-progress button.filled { background: var(--brand-blue); color: white; border-color: var(--brand-blue); }
.round-progress button.current { outline: 2px solid var(--orange); outline-offset: 2px; }
.original-answers-card { margin-top: 25px; padding: 27px; background: white; border: 1px solid #dce3ef; border-radius: 18px; }
.original-answers-card .section-heading { gap: 15px; }
.original-answers-card .section-heading p { font-size: 12px; line-height: 1.8; }
.original-answers-card table { width: 100%; border-collapse: collapse; font-size: 12px; }
.original-answers-card th, .original-answers-card td { padding: 13px 10px; border-bottom: 1px solid #e4e8ef; text-align: right; white-space: nowrap; }
.original-answers-card th:first-child { text-align: left; }
.original-answers-card thead { color: #59647a; font-size: 11px; }
.original-answers-card tbody th { font-weight: 500; }
.original-answers-card .context-explanation { margin: 17px 0 12px; }
.answer-review-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 20px 0; padding: 17px; border-radius: 10px; background: var(--brand-blue-soft); }
.review-heading { font-size: 17px; margin: 25px 0 12px; }
.answer-review-list { list-style: none; padding: 0; margin: 0; }
.answer-review-list > li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 15px 0; border-bottom: 1px solid #dce3ef; }
.answer-review-list strong { font-size: 13px; }
.answer-review-list strong span { font-size: 10px; color: var(--brand-blue-dark); margin-left: 7px; }
#info-dialog .answer-review-list p { font-size: 12px; margin: 8px 0; }
.answer-review-list small { font-size: 11px; color: #59647a; line-height: 1.7; display: block; }
.answer-review-list .text-link { flex-shrink: 0; min-height: 40px; }
.review-ratings article { padding: 16px; border: 1px solid #dce3ef; border-radius: 12px; margin-bottom: 13px; }
.review-ratings article > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.review-ratings ul { list-style: none; padding: 0; margin: 12px 0 0; }
.review-ratings li { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 8px 0; color: #52668d; }
.review-ratings li strong { flex-shrink: 0; }
@media(max-width: 950px) { .about-me-grid { grid-template-columns: 1fr; gap: 24px; } .about-me-card .suggestion-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .profile-review-card { align-items: flex-start; flex-direction: column; } }
@media(max-width: 510px) { .about-me-section { padding: 20px 16px; } .about-me-card .suggestion-chip { font-size: 12px; } .answer-tracker { align-items: flex-start; flex-direction: column; gap: 12px; padding: 16px; } .answer-tracker > div { width: 100%; } .answer-tracker .text-link { align-self: flex-start; } .direction-panel { padding: 14px; } .direction-panel .section-heading { flex-direction: column; } .direction-suggestions { grid-template-columns: 1fr; } .direction-suggestion select, #about-note { font-size: 16px; } .original-answers-card { padding: 20px 16px; } .original-answers-card .section-heading { flex-direction: column; align-items: flex-start; } .round-progress > div { gap: 6px; } .round-progress button { min-width: 31px; height: 36px; } .profile-review-card .button { width: 100%; justify-content: center; font-size: 12px; } }

/* One visual language for progress, answers, and weighted results. */
[data-option-color="0"] { --option-color: #2454ff; --option-soft: #edf2ff; --option-ink: #153bc2; }
[data-option-color="1"] { --option-color: #ff7a24; --option-soft: #fff0e3; --option-ink: #9b420b; }
[data-option-color="2"] { --option-color: #087f76; --option-soft: #e8f6f1; --option-ink: #087f76; }
.journey-map { background: #fffdf8; border: 1px solid #dce3ef; border-radius: 18px; padding: 20px; margin: 0 0 24px; }
.journey-stages { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 0; margin: 0; }
.journey-stages li { display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 12px; border-top: 4px solid #e5e8ef; font-size: 12px; font-weight: 600; color: #647086; }
.journey-stages li small { font-size: 10px; font-weight: 400; }
.journey-stages .journey-current { color: #172746; border-color: #ff7a24; }
.journey-stages .journey-complete { color: #153bc2; border-color: #2454ff; }
.journey-stop { width: 28px; height: 28px; border: 1px solid #dce3ef; border-radius: 50%; display: grid; place-items: center; background: white; }
.journey-current .journey-stop { background: #ff7a24; border-color: #ff7a24; }
.journey-complete .journey-stop { background: #edf2ff; border-color: #c6d3ff; }
.journey-stop .icon { width: 15px; height: 15px; }
.journey-cue { border-top: 1px solid #e5e8ef; margin-top: 18px; padding-top: 16px; display: flex; justify-content: space-between; gap: 18px; }
.journey-cue > div:first-child { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.journey-cue span { color: #59647a; font-size: 11px; }
.journey-answer-meter { width: 48%; max-width: 290px; }
.journey-answer-meter label { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #59647a; }
.journey-answer-meter progress { display: block; width: 100%; height: 7px; margin-top: 8px; border: 0; border-radius: 5px; overflow: hidden; background: #e5e8ef; accent-color: #2454ff; }
.journey-answer-meter progress::-webkit-progress-bar { background: #e5e8ef; border-radius: 5px; }
.journey-answer-meter progress::-webkit-progress-value { background: #2454ff; border-radius: 5px; }
.journey-answer-meter progress::-moz-progress-bar { background: #2454ff; }
.results-content .result-grid { grid-template-columns: minmax(0, 1.5fr) minmax(290px, 1fr); align-items: start; }
.result-grid > *, .visual-result-grid > * { min-width: 0; }
.recommendation-card.fit-overview { background: #f5f7ff; border-color: #c6d3ff; }
.recommendation-card.fit-overview > p { font-size: 12px; color: #59647a; line-height: 1.75; }
.fit-overview .fit-number { color: #172746; }
.fit-overview .pill { color: #153bc2; background: white; border-color: #dce3ef; }
.fit-overview .fit-number small { font-size: 13px; margin-left: 3px; }
.fit-comparison { margin: 26px 0 0; }
.fit-comparison figcaption { font-size: 11px; color: #59647a; margin-bottom: 18px; }
.fit-comparison ol, .priority-chart ol, .tradeoff-bars { list-style: none; margin: 0; padding: 0; }
.fit-comparison li + li { margin-top: 20px; }
.fit-option-label { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.5; }
.fit-option-label strong { flex: 1; overflow-wrap: anywhere; }
.fit-option-label b { color: var(--option-ink); font-size: 20px; flex-shrink: 0; }
.fit-option-label b small { font-size: 11px; margin-left: 2px; font-weight: 400; }
.option-token { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--option-soft); color: var(--option-ink); font-size: 12px; font-weight: 600; }
.fit-option-track { height: 14px; background: var(--option-soft); border-radius: 8px; margin-top: 9px; overflow: hidden; }
.fit-option-track i { display: block; height: 100%; border-radius: inherit; background: var(--option-color); }
.chart-axis, .tradeoff-axis { display: flex; justify-content: space-between; font-size: 10px; color: #59647a; margin-top: 12px; }
.results-content .chart-note { color: #59647a; font-size: 11px; line-height: 1.7; margin: 14px 0 0; }
.priority-chart ol { display: grid; gap: 15px; margin-top: 20px; }
.priority-chart li > div:first-child { display: flex; align-items: baseline; gap: 8px; font-size: 12px; line-height: 1.5; }
.priority-chart li strong { margin-left: auto; color: #172746; flex-shrink: 0; }
.priority-rank { color: #647086; min-width: 10px; font-size: 10px; }
.priority-bar-track { margin: 7px 0 0 18px; height: 7px; background: #e5e8ef; border-radius: 5px; overflow: hidden; }
.priority-bar-track i { display: block; background: #2454ff; height: 100%; border-radius: inherit; }
.whatif-controls { border-top: 1px solid #dce3ef; margin-top: 23px; padding-top: 15px; }
.whatif-controls summary, .result-details summary { cursor: pointer; font-size: 13px; color: #153bc2; line-height: 1.8; padding: 6px 0; }
.whatif-controls summary span, .result-details summary span { display: block; color: #59647a; font-size: 11px; padding-left: 15px; }
.whatif-controls summary:focus-visible, .result-details summary:focus-visible { outline: 2px solid #2454ff; outline-offset: 4px; }
.results-content .scenario-note { font-size: 11px; color: #59647a; line-height: 1.7; margin-top: 16px; }
.results-content .priority-slider input { height: 7px; margin: 16px 0 7px; }
.results-content .priority-slider input::-webkit-slider-thumb { width: 22px; height: 22px; }
.results-content .priority-slider input::-moz-range-thumb { width: 18px; height: 18px; }
.visual-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; align-items: start; }
.visual-card { background: white; border: 1px solid #dce3ef; border-radius: 18px; padding: 24px; }
.visual-card .section-heading { align-items: flex-start; flex-wrap: wrap; }
.visual-card .section-heading h2 { font-size: 21px; margin: 9px 0; }
.visual-card .section-heading p { color: #59647a; font-size: 12px; line-height: 1.7; }
.visual-card .eyebrow { font-size: 9px; letter-spacing: 1px; color: #153bc2; }
.rating-map-legend { display: flex; flex-wrap: wrap; gap: 8px 15px; font-size: 10px; color: #59647a; margin-bottom: 14px; }
.rating-map { min-width: 360px; table-layout: fixed; }
.rating-map th, .rating-map td { padding: 12px 6px; font-size: 11px; border-bottom: 1px solid #e5e8ef; color: #172746; vertical-align: middle; }
.rating-map th:first-child { width: 39%; padding-left: 0; }
.rating-map thead th:not(:first-child) { text-align: center; }
.rating-map thead .option-token { display: flex; margin: 0 auto 7px; }
.rating-map thead th > span:last-child { overflow-wrap: anywhere; display: block; line-height: 1.5; }
.rating-map th small { display: block; font-size: 10px; color: #59647a; font-weight: 400; margin-top: 5px; }
.rating-map-cell { display: flex; flex-direction: column; gap: 7px; align-items: center; padding: 11px 4px; border-radius: 9px; background: var(--option-soft); color: var(--option-ink); }
.rating-map-cell strong { font-size: 12px; }
.rating-map-cell strong small { font-size: 10px; font-weight: 400; }
.rating-map-dots { display: inline-flex; gap: 3px; }
.rating-map-dots i { display: inline-block; width: 7px; height: 7px; border: 1px solid #b8c1d1; border-radius: 50%; background: white; }
.rating-map-dots i.on { background: var(--option-color); border-color: var(--option-color); }
.tradeoff-legend { display: flex; justify-content: space-between; gap: 16px; margin: 18px 0; font-size: 11px; line-height: 1.7; }
.tradeoff-legend > span { flex: 1; color: var(--option-ink); }
.tradeoff-legend > span:last-child { text-align: right; }
.tradeoff-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; background: var(--option-color); border-radius: 50%; }
.tradeoff-bars { display: grid; gap: 16px; }
.tradeoff-row-label { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 12px; margin-bottom: 7px; }
.tradeoff-row-label strong { font-weight: 500; }
.tradeoff-row-label span { flex-shrink: 0; font-size: 11px; font-variant-numeric: tabular-nums; }
.tradeoff-track { height: 12px; background: #f0f2f7; position: relative; border-radius: 6px; overflow: hidden; }
.tradeoff-track i { position: absolute; height: 100%; background: var(--option-color); border-radius: 6px; }
.tradeoff-track .positive { left: 50%; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tradeoff-track .negative { right: 50%; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tradeoff-track b { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #8791a4; }
.tradeoff-bars li > small { display: block; margin-top: 6px; color: #59647a; font-size: 10px; }
.tradeoff-total { border-top: 1px solid #dce3ef; margin-top: 18px; padding-top: 14px; font-size: 12px; line-height: 1.7; }
.result-details { margin-top: 20px; padding: 16px 20px; background: white; border: 1px solid #dce3ef; border-radius: 14px; }
.result-details .comparison-table-card, .result-details .original-answers-card { border: 0; padding: 12px 0; margin: 0; }
.comparison-row.chosen-best { background: #edf2ff; border-color: #2454ff; }
.comparison-row.chosen-worst { background: #fff0e3; border-color: #ff7a24; }
.rating-list .rating-button.selected { background: var(--option-color); color: white; border-color: var(--option-color); }
.rating-list[data-option-color="1"] .rating-button.selected { color: #172746; }
@media(max-width: 1150px) { .visual-result-grid { grid-template-columns: 1fr; } }
@media(max-width: 950px) { .results-content .result-grid { grid-template-columns: 1fr; } }
@media(max-width: 510px) {
  .journey-map { padding: 15px 12px; }
  .journey-stages { gap: 4px; }
  .journey-stages li { font-size: 10px; gap: 6px; }
  .journey-stages li small { font-size: 8px; text-align: center; }
  .journey-cue { flex-direction: column; gap: 13px; }
  .journey-answer-meter { width: 100%; max-width: none; }
  .journey-cue > div:first-child { flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
  .fit-option-label { font-size: 12px; }
  .fit-option-label b { font-size: 17px; }
  .fit-overview .recommendation-top { gap: 8px; }
  .fit-overview .pill { font-size: 10px; }
  .visual-card { padding: 20px 16px; }
  .visual-card .section-heading h2 { font-size: 20px; }
  .rating-map { min-width: 300px; }
  .rating-map th:first-child { width: 35%; }
  .rating-map th, .rating-map td { font-size: 10px; padding: 10px 3px; }
  .rating-map-dots { gap: 2px; }
  .rating-map-dots i { width: 6px; height: 6px; }
  .result-details { padding: 14px; }
}