.expansion { overflow-wrap: anywhere; }
.expansion .container { max-width: 75rem; }
.exp-hero { background: var(--color-surface); padding: clamp(3rem, 7vw, 6rem) 0; border-bottom: 1px solid var(--color-border); }
.exp-hero h1 { max-width: 23ch; margin: 1rem 0 1.5rem; }
.exp-hero p { max-width: 65ch; }
.exp-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .8rem; color: #725125; }
.exp-section { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.exp-section h2 { margin-bottom: 1.25rem; }
.exp-section p + p { margin-top: 1rem; }
.exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; margin-top: 2rem; }
.exp-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; background: white; min-width: 0; }
.exp-card h3 { margin-bottom: .8rem; }
.expansion a:not(.exp-button) { color: #36543f; text-decoration: underline; text-underline-offset: .2em; }
.exp-button, .exp-search button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #1a2e22; border-radius: .6rem; padding: .8rem 1.3rem; background: #1a2e22; color: white; font: inherit; font-weight: 700; text-decoration: none; margin-top: 1.25rem; cursor: pointer; }
.exp-button:hover, .exp-search button:hover { background: #304c38; color: white; }
.expansion :focus-visible, .exp-search :focus-visible, .exp-extra-filters :focus-visible { outline: 3px solid #725125; outline-offset: 4px; }
.exp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; margin: 1.5rem 0; }
.exp-fields label, .exp-extra-filters label { display: flex; flex-direction: column; gap: .4rem; font-weight: 700; }
.exp-fields input, .exp-fields select, .exp-search select, .exp-extra-filters select, .exp-extra-filters input { width: 100%; min-width: 0; min-height: 44px; background: white; color: #1a2e22; border: 1px solid #7a6e65; border-radius: .5rem; padding: .7rem; font: inherit; }
.exp-search { padding: 1.25rem; background: white; border: 1px solid var(--color-border); border-radius: 1rem; margin: 1.25rem 0; max-width: 40rem; }
.exp-search label { display: block; color: #1a2e22; font-weight: 700; margin-bottom: .5rem; }
.exp-search button { margin-top: .75rem; width: 100%; }
.exp-extra-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1rem; width: 100%; }
.exp-status { display: inline-block; padding: .3rem .7rem; border-radius: 1rem; font-size: .85rem; font-weight: 700; background: #eeeae4; color: #494139; }
.exp-status.available { background: #e4f1e7; color: #215231; }
.psy-card__availability-bar.available { background: #215231; }
.exp-bars { display: grid; gap: .75rem; margin: 1.5rem 0; }
.exp-bars meter { width: 100%; height: 1.5rem; accent-color: #1a2e22; }
.exp-result { padding: 1.5rem; border-left: 4px solid #36543f; background: var(--color-surface); }
.exp-quiz { max-width: 48rem; margin: auto; }
.exp-quiz fieldset { border: 0; margin-top: 1.5rem; }
.exp-quiz legend { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.exp-answer { display: flex; gap: .8rem; align-items: center; min-height: 48px; padding: .8rem; border: 1px solid #7a6e65; border-radius: .5rem; margin: .6rem 0; cursor: pointer; }
.exp-quiz progress { width: 100%; accent-color: #36543f; }
.exp-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.expansion [hidden] { display: none; }
.exp-skip { position: absolute; left: 1rem; top: -6rem; background: white; color: #1a2e22; padding: 1rem; z-index: 200; }
.exp-skip:focus { top: 1rem; }
@media (prefers-reduced-motion: reduce) { .landing-page { scroll-behavior: auto; } .landing-page * { animation: none; transition: none; } }