/* Local UI trial: shared spacing, readable copy, and one clear starting point. */
:root { --home-muted: #686e65; }
.phone::before, .phone::after { opacity: .25; }
.brand-tag { color: #686e65; }
.elder-home { gap: 16px; }
.elder-home .welcome-text { padding-top: 16px; }
.home-eyebrow { margin-bottom: 7px; }
.elder-home h1 { font-size: 26px; line-height: 1.35; letter-spacing: -.03em; max-width: none; }
.elder-home .subtitle { margin-top: 6px; font-size: 14px; line-height: 1.6; }
.elder-home .assessment-entry { min-height: 120px; padding: 16px; border: 0; border-radius: 16px; background: #3f5d48; color: white; grid-template-areas: "title title" "copy arrow"; row-gap: 8px; }
.assessment-entry > span { font-size: 21px; line-height: 1.35; }
.assessment-entry > span em { display: block; margin-bottom: 7px; font-style: normal; font-size: 12px; font-weight: 400; color: #e0e9de; letter-spacing: .03em; }
.assessment-entry > small { font-size: 12px; margin: 0; color: #e0e9de; line-height: 1.5; }
.assessment-entry > b { color: white; font-size: 13px; }
.elder-home .section-title { font-size: 16px; }
.section-heading > span { color: #686e65; font-size: 12px; }
.elder-home .tool-card { min-height: 126px; padding: 13px; gap: 7px; }
.elder-home .tool-card svg { position: absolute; right: 12px; top: 14px; width: 20px; height: 20px; }
.elder-home .tool-label { padding-right: 22px; font-size: 18px; }
.elder-home .tool-card small { font-size: 14px; line-height: 1.5; }
.elder-home .tool-card b { bottom: 12px; font-size: 13px; }
.elder-home .tool-card::after { opacity: .4; }
.elder-home .symptoms-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.elder-home .symptom-card { min-height: 44px; width: auto; padding: 10px 8px; border-radius: 10px; font-size: 14px; }
.seasonal-entry { min-height: 70px; padding: 10px 12px; }
.elder-home .trust-bar { display: flex; font-size: 12px; }
.elder-home .trust-item { color: #686e65; }
button:focus-visible, input:focus-visible { outline: 3px solid #b17b47; outline-offset: 3px; }
.capture-album, .capture-retry { min-height: 48px; padding: 10px 16px; border-radius: 12px; border: 1px solid #b0a28f; color: #fff; background: #26231f; font: inherit; font-size: 15px; }
.capture-shutter-row { gap: 14px; }
.capture-hint { max-width: 270px; line-height: 1.5; }
.capture-retry[hidden], .capture-flash[hidden] { display: none !important; }
.camera-unavailable .capture-shutter, .camera-unavailable .capture-frame, .camera-unavailable .capture-checklist, .camera-unavailable .capture-flip { display: none; }
.camera-unavailable .capture-top { align-items: flex-start; }
.camera-unavailable .capture-title { padding-top: 70px; font-size: 20px; }
.camera-unavailable .capture-hint { margin-top: 16px; font-size: 15px; color: #e0d6c5; }
.camera-unavailable .capture-album { background: #8f4936; border-color: #bd8466; font-weight: 700; }
.camera-unavailable .capture-note { font-size: 13px; }
/* Assessment: match the home canvas and keep the primary action in reach. */
body:has(.test-page) { background: #efefeb; color: #272b25; }
.test-page { max-width: 390px; background: #f7f7f4; }
.test-page::before, .test-page::after { opacity: .025; }
.test-nav { background: #f7f7f4; }
.test-title { font-size: 16px; }
.test-main { padding: 22px 20px 145px; }
.question-kicker { color: #52705b; font-size: 12px; }
.question-text { font-size: 24px; margin-bottom: 22px; }
.profile-grid { gap: 9px; margin-bottom: 20px; }
.profile-btn { min-height: 48px; padding: 10px 8px; font-size: 14px; font-weight: 600; border-radius: 12px; background: white; border-color: #dfdfd6; box-shadow: none; }
.profile-btn.selected { background: #3f5d48; border-color: #3f5d48; box-shadow: none; }
.profile-section-title { color: #444d41; }
.profile-note { font-size: 12px; color: #686e65; }
.question-card:has(.profile-dock) { animation: none !important; }
.profile-dock { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(390px,100%); padding: 10px 20px calc(16px + env(safe-area-inset-bottom)); z-index: 15; background: #f7f7f4; border-top: 1px solid #e3e3db; }
.profile-missing { margin: 0 0 8px; text-align: center; color: #686e65; font-size: 13px; }
.start-test-btn { margin: 0; border-radius: 12px; background: #3f5d48; box-shadow: none; font-size: 16px; }
.start-test-btn:disabled { opacity: 1; background: #e0e4dc; color: #626b5d; }
.test-actions { width: min(390px,100%); background: #f7f7f4; }
.test-actions[hidden] { display: none; }
.option-card { box-shadow: none; border-radius: 14px; }
.action-btn.primary, .option-card.selected { background: #3f5d48; box-shadow: none; }
.progress-fill { background: #52705b; }
@media (prefers-reduced-motion: reduce) { .question-card, .result-view { animation: none; } .progress-fill { transition: none; } }
/* Leadership direction: seasonal tea is the first and strongest entry. */
.elder-home { padding-top: 18px; }
.elder-home .seasonal-feature { position: relative; min-height: 176px; padding: 22px 20px; grid-template-columns: 1fr 60px; grid-template-areas: "copy mark" "action mark"; gap: 18px; background: #3f5d48; border: 0; border-radius: 18px; }
.seasonal-feature .seasonal-entry-copy { grid-area: copy; gap: 10px; }
.seasonal-feature .seasonal-entry-copy small { color: #dce7d7; font-size: 13px; letter-spacing: .08em; }
.seasonal-feature .seasonal-entry-copy strong { color: #fffdf6; font-family: "Songti SC", "STSong", serif; font-size: 30px; line-height: 1.2; font-weight: 600; }
.seasonal-feature .seasonal-entry-copy em { color: #e0e9de; font-size: 12px; white-space: normal; line-height: 1.5; }
.seasonal-feature .seasonal-term-mark { grid-area: mark; width: 58px; height: 58px; border-color: #a9b899; }
.seasonal-feature .seasonal-term-mark::before { width: 42px; height: 42px; }
.seasonal-feature > b { grid-area: action; color: white; font-size: 14px; }
.elder-home .assessment-entry { min-height: 84px; padding: 15px 16px; background: #eeeae4; color: #272b25; border: 1px solid #e1ddd4; grid-template-areas: "title arrow" "copy arrow"; row-gap: 6px; }
.assessment-entry > span { font-size: 17px; }
.assessment-entry > small { color: #62685f; font-size: 12px; }
.assessment-entry > b { color: #8f4936; font-size: 13px; }