.personality-layout {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(28px, 5vw, 80px);
    padding-block: clamp(36px, 6vw, 82px) 64px;
}

.personality-intro h1 { font-size: clamp(40px, 4.8vw, 66px); }
.personality-facts { display: flex; flex-wrap: wrap; gap: 18px 30px; margin-top: 26px; }
.personality-facts dt { margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.personality-facts dd { color: var(--cream); font-size: 14px; font-weight: 700; }
.personality-compass { width: min(85%, 320px); margin-top: 16px; color: var(--gold); }
.personality-compass svg { width: 100%; height: auto; }
.personality-disclaimer { max-width: 350px; margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.75; }

.personality-card h2 { font-size: clamp(28px, 3vw, 36px); }
.personality-card [hidden] { display: none; }
.personality-form { display: grid; gap: 18px; margin-top: 24px; }
.personality-progress { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 14px; color: #3b564a; font-size: 12px; font-weight: 750; }
.personality-progress progress { width: 100%; height: 7px; overflow: hidden; appearance: none; border: 0; border-radius: 999px; background: #dedbcc; color: #3c6b55; }
.personality-progress progress::-webkit-progress-bar { background: #dedbcc; }
.personality-progress progress::-webkit-progress-value { background: #3c6b55; }
.personality-progress progress::-moz-progress-bar { background: #3c6b55; }
.personality-step { display: grid; gap: 18px; padding-block: 13px 2px; border-top: 1px solid var(--paper-line); }
.personality-step h3 { display: flex; align-items: baseline; gap: 6px; color: #294c3d; font-size: 15px; letter-spacing: .08em; }
.personality-step h3 span { color: #775b34; font-size: 10px; letter-spacing: .12em; }
.personality-question { min-width: 0; margin: 0; padding: 0; border: 0; }
.personality-question legend { padding: 0; font-size: 14px; font-weight: 750; line-height: 1.55; }
.personality-question legend span { margin-right: 8px; color: #775b34; font-size: 11px; }
.personality-options { display: grid; gap: 6px; margin-top: 7px; }
.personality-options label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #d7d2c3;
    border-radius: 8px;
    background: #fdfaf2;
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}
.personality-options label:hover { border-color: #7b917c; }
.personality-options label:has(input:checked) { border-color: #517965; background: #e7eee3; }
.personality-options label:has(input:focus-visible) { outline: 2px solid #547665; outline-offset: 2px; }
.personality-options input { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; accent-color: #285242; }
.personality-controls { display: flex; gap: 10px; }
.personality-controls .primary-button { flex: 1; }
.personality-secondary {
    min-width: 74px;
    padding: 10px 14px;
    border: 1px solid #bec9bb;
    border-radius: 9px;
    color: #244e40;
    background: transparent;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}
.personality-secondary:hover { background: #e7eee3; }
.personality-form .privacy-note { margin-top: -5px; }

.personality-results h1 em { display: block; font: 750 clamp(57px, 7vw, 93px)/1.08 var(--sans); letter-spacing: .045em; }
.personality-results h1 span { display: block; margin-top: 14px; font-size: clamp(27px, 3.4vw, 44px); }
.personality-results .back-link { min-height: 44px; margin-top: 25px; }
.personality-axes { display: grid; gap: 17px; margin-top: 25px; }
.personality-axis { display: grid; gap: 8px; padding: 13px 15px 15px; border: 1px solid var(--paper-line); border-radius: 10px; background: #fdfaf2; }
.personality-axis h3 { font-size: 14px; }
.personality-axis-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.personality-axis-labels > div { display: grid; align-content: start; gap: 3px; color: #5a5f55; font-size: 12px; line-height: 1.45; }
.personality-axis-labels > div:last-child { text-align: right; }
.personality-axis-labels .is-preferred { color: #244e40; font-weight: 750; }
.personality-axis-labels b { margin-right: 2px; font-size: 15px; }
.personality-axis-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 3px; }
.personality-axis-bar span { height: 7px; border-radius: 3px; background: #a27640; }
.personality-axis-bar span.is-left { background: #3c6b55; }
.personality-result-note { margin-top: 19px; padding-top: 14px; border-top: 1px solid var(--paper-line); color: #56635a; font-size: 12px; line-height: 1.65; }

@media (max-width: 760px) {
    .personality-layout { width: min(560px, calc(100% - 36px)); grid-template-columns: 1fr; }
    .personality-intro { padding-top: 0; }
    .personality-intro h1 { margin-top: 16px; }
    .personality-intro .intro-copy { margin-top: 15px; }
    .personality-compass { display: none; }
}