/* Professional Learning · single-screen applied Side demonstration
   Scoped to .ss-pro to preserve Side pages and the global header. */
.ss-pro .ss-demo{background:#e4ebe1;padding:58px 0 54px;color:#1b251f;scroll-margin-top:28px}
.ss-pro .ss-demo-shell{background:#f9faf6;border:1px solid rgba(31,60,40,.16);padding:27px 34px 22px;box-shadow:0 12px 36px rgba(20,38,27,.055)}
.ss-pro .ss-demo-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);gap:38px;align-items:end}
.ss-pro .ss-demo-eyebrow,.ss-pro .ss-demo-label,.ss-pro .ss-demo-step-label{font:700 10px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:#55775d}
.ss-pro .ss-demo-eyebrow{margin:0 0 12px}
.ss-pro .ss-demo h2{font:400 clamp(32px,3.2vw,49px)/1.03 var(--serif);letter-spacing:-.025em;margin:0;max-width:750px}
.ss-pro .ss-demo-intro{font-size:13px;line-height:1.6;color:#5b6d5e;margin:0 0 2px;max-width:360px}
.ss-pro .ss-demo-case{display:flex;gap:21px;align-items:center;border-top:1px solid #d7ded3;border-bottom:1px solid #d7ded3;padding:17px 0;margin:24px 0 17px}
.ss-pro .ss-demo-case strong{font:400 37px/1 var(--serif);white-space:nowrap}
.ss-pro .ss-demo-case p{font-size:13px;line-height:1.5;margin:0;max-width:750px}
.ss-pro .ss-demo-case small{font-size:11px;color:#617365;white-space:nowrap;margin-left:auto}
.ss-pro .ss-demo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.ss-pro .ss-demo-step{padding:4px 24px 8px;border-left:1px solid #d7ded3;min-width:0}
.ss-pro .ss-demo-step:first-child{border-left:0;padding-left:0}
.ss-pro .ss-demo-step:last-child{padding-right:0}
.ss-pro .ss-demo-step-label{display:block;margin-bottom:10px}
.ss-pro .ss-demo-step h3{font:400 27px/1.08 var(--serif);letter-spacing:-.015em;margin:0 0 10px}
.ss-pro .ss-demo-step p{font-size:13px;line-height:1.6;margin:0;color:#445449}
.ss-pro .ss-demo-result{display:flex;align-items:center;gap:18px;justify-content:space-between;margin-top:19px;padding-top:15px;border-top:1px solid #d7ded3}
.ss-pro .ss-demo-result p{font-size:12px;line-height:1.5;color:#475a4b;margin:0}
.ss-pro .ss-demo-result strong{color:#24482f}
.ss-pro .ss-demo-links{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.ss-pro .ss-demo-links a{font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.ss-pro .ss-demo-links a:hover{color:#8c4c37}
.ss-pro .ss-demo-hero-link{display:inline-block;color:#c8daca;text-underline-offset:5px;font-size:12px;font-weight:700;margin-left:20px}
.ss-pro .ss-demo-hero-link:hover{color:#fff}
@media(max-width:900px){
.ss-pro .ss-demo-head{grid-template-columns:1fr;gap:13px}
.ss-pro .ss-demo-intro{max-width:670px}
.ss-pro .ss-demo-case{flex-wrap:wrap}
.ss-pro .ss-demo-case small{margin-left:0}
.ss-pro .ss-demo-steps{grid-template-columns:1fr;gap:14px}
.ss-pro .ss-demo-step,.ss-pro .ss-demo-step:first-child,.ss-pro .ss-demo-step:last-child{padding:0 0 0 16px;border-left:2px solid #9ab69d}
.ss-pro .ss-demo-result{align-items:start;flex-direction:column}
}
@media(max-width:760px){
.ss-pro .ss-demo{padding:33px 0}
.ss-pro .ss-demo-shell{padding:23px 20px}
.ss-pro .ss-demo h2{font-size:34px}
.ss-pro .ss-demo-case{gap:10px 15px}
.ss-pro .ss-demo-hero-link{display:block;margin:18px 0 0}
}
@media(prefers-reduced-motion:reduce){.ss-pro .ss-demo{scroll-behavior:auto}}

/* Five-Pathway case selector · progressive enhancement: all cases readable without JavaScript. */
.ss-pro .ss-demo{padding-top:45px}
.ss-pro .ss-demo-topline{display:flex;justify-content:space-between;gap:24px;align-items:end;margin:0 0 20px}
.ss-pro .ss-demo-topline h2{font:400 clamp(29px,3vw,43px)/1.07 var(--serif);margin:0;letter-spacing:-.025em}
.ss-pro .ss-demo-topline p{font-size:12px;line-height:1.5;color:#536b57;margin:0;max-width:370px}
.ss-pro .ss-demo-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:8px}
.ss-pro .ss-demo-tab{min-width:0;min-height:67px;border:1px solid #c7d4c4;background:#ebf0e7;color:#304331;padding:12px 13px;text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;gap:7px}
.ss-pro .ss-demo-tab span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#55775d}
.ss-pro .ss-demo-tab strong{font-size:12px;line-height:1.27;font-weight:750}
.ss-pro .ss-demo-tab:hover{background:#dce9d8}
.ss-pro .ss-demo-tab.is-active,.ss-pro .ss-demo-tab[aria-selected="true"]{background:#244632;color:#f8faf6;border-color:#244632}
.ss-pro .ss-demo-tab.is-active span,.ss-pro .ss-demo-tab[aria-selected="true"] span{color:#c0d8be}
.ss-pro .ss-demo-tab:focus-visible{outline:3px solid #ed704a;outline-offset:2px;z-index:1}
.ss-pro .ss-demo-panels>.ss-demo-shell+.ss-demo-shell{margin-top:12px}
.ss-pro .ss-demo-panels.ss-demo-enhanced>.ss-demo-shell[hidden]{display:none!important}
.ss-pro .ss-demo-shell{scroll-margin-top:24px}
.ss-pro .ss-demo-case strong{font-size:34px}
@media(max-width:900px){
.ss-pro .ss-demo-topline{align-items:start;flex-direction:column;gap:8px}
.ss-pro .ss-demo-tabs{display:flex;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding-bottom:4px}
.ss-pro .ss-demo-tab{flex:0 0 190px;scroll-snap-align:start}
}
@media(max-width:760px){.ss-pro .ss-demo{padding-top:30px}.ss-pro .ss-demo-topline h2{font-size:30px}}

/* Examples are the five-workshop selector; free reading is a subordinate resource. */
.ss-pro .ss-demo-workshop-context{font-size:11px;line-height:1.5;color:#405d46;margin:0 0 12px}.ss-pro .ss-demo-workshop-context strong{font-weight:800}
.ss-pro .ss-library-note{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:25px;border-block:1px solid rgba(28,42,33,.18);margin-bottom:38px}
.ss-pro .ss-library-note p{font-size:13px;line-height:1.6;color:#4a5e50;margin:7px 0 0;max-width:790px}.ss-pro .ss-library-note a{color:#264a30;text-underline-offset:4px}
.ss-pro .ss-library-note>a{white-space:nowrap;font-size:12px;font-weight:700}
@media(max-width:760px){.ss-pro .ss-library-note{align-items:start;flex-direction:column}}

/* SS-017: make the evidence boundary visible without changing the workshop grid. */
.ss-pro .ss-method-evidence-link{margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(30,56,36,.23);font-size:13px;line-height:1.65;color:#4b5d4e;max-width:990px}
.ss-pro .ss-method-evidence-link a{font-weight:750;color:#285437;text-underline-offset:4px}
.ss-pro .ss-method-evidence-link a:hover{color:#a54e2f}