/* Features page: area list on the left, the chosen area's features on the right. */
.feature-browser{display:grid;grid-template-columns:290px minmax(0,1fr);gap:36px;align-items:start;margin-top:24px}
.feature-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px}
.feature-side label{font-size:12px;color:var(--ink-muted)}
.feature-side input,.feature-side select{display:block;width:100%;min-width:0;margin-top:7px;padding:12px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink-strong);border:1px solid var(--line);border-radius:3px}
.feature-side input::placeholder{color:var(--ink-muted)}
.feature-areas{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:10px}
.feature-areas button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:6px 12px;border:0;border-left:2px solid transparent;background:transparent;color:var(--ink-muted);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.feature-areas button:hover:not(:disabled){color:var(--ink-strong)}
.feature-areas button[aria-current=true]{border-color:var(--sage);background:var(--green-soft);color:var(--ink-strong)}
.feature-areas button b{font-weight:500;font-size:12px;color:var(--sage-deep)}
.feature-areas button:disabled{opacity:.35;cursor:default}
.feature-side .feature-results{margin:0;flex-wrap:wrap;gap:6px 16px}
.feature-main .feature-groups{display:block}
.feature-main .feature-group{padding:26px 28px}
.feature-main .feature-group h2{font-size:24px}
@media(min-width:1100px){.feature-main .feature-group ul{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}}
@media(max-width:850px){.feature-browser{grid-template-columns:1fr;gap:20px}.feature-side{position:static}}
.feature-step-nav{display:flex;justify-content:space-between;padding:10px 0 0;border-top:1px solid var(--line)}
.feature-step-nav button{font-size:14px}
.feature-step-nav button:disabled{visibility:hidden}
/* Compact sidebar so the 17 practice areas and Previous/Next fit a short window. */
.feature-side{gap:10px}
.feature-side input,.feature-side select{padding:9px 12px;margin-top:5px}
.feature-areas{padding-top:6px;gap:0}
.feature-areas button{padding:5px 12px}
.feature-step-nav{padding-top:8px}
/* In a short window the area list scrolls inside itself, so Previous/Next always stay on screen. */
@media(min-width:851px){.feature-side{max-height:calc(100vh - 32px)}.feature-areas{flex:1 1 auto;min-height:0;overflow-y:auto}}
/* Two flowing columns instead of rows, so a short feature never sits above empty space. */
@media(min-width:1100px){.feature-main .feature-group ul{display:block;column-count:2;column-gap:36px}.feature-main .feature-group li{break-inside:avoid}}
/* Narrow screens: an accordion. The open area sits under its name; Previous/Next are not needed. */
@media(max-width:850px){
 .feature-step-nav{display:none}
 .feature-areas button{padding:13px 12px;font-size:15px}
 .feature-areas button b{margin-left:auto}
 .feature-areas button[aria-expanded]::after{content:'';flex:none;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px)}
 .feature-areas button[aria-expanded=true]::after{transform:rotate(-135deg) translateY(-3px)}
 .feature-areas .feature-group{margin:2px 0 12px;padding:6px 16px 4px}
 .feature-areas .feature-group h2{display:none}
}