/* Demonstration pages and the notice shared by every demo screen. */
.demo-banner{border-bottom:1px solid #cba965;background:#fff2cf;color:#493911}
.demo-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;max-width:1440px;margin:0 auto;padding:16px max(5vw,20px)}
.demo-banner-copy{min-width:0;max-width:740px}
.demo-banner-copy p{font-size:13px;line-height:1.55;margin:4px 0;overflow-wrap:anywhere}
.demo-banner-copy .demo-banner-title{display:flex;align-items:center;gap:9px;font-size:14px;margin:0 0 5px}
.demo-badge{display:inline-flex;align-items:center;flex:0 0 auto;border:1px solid #8f702f;border-radius:5px;background:#725413;color:#fff8e8;padding:2px 6px;font-size:10px;font-weight:750;letter-spacing:.08em}
.demo-session-summary{display:flex;align-items:baseline;gap:4px 14px;flex-wrap:wrap}
.demo-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.demo-controls form{margin:0;max-width:100%}
.demo-banner .demo-control{display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;border:1px solid #9d7a37;border-radius:7px;padding:9px 12px;background:#fffaf0;color:#4b3810;font:inherit;font-size:13px;line-height:1.4;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.demo-banner .demo-control:hover{background:#f4e3b6;border-color:#70521b}
.demo-banner .demo-control-exit{background:transparent}
.demo-banner .demo-control:focus-visible{outline:3px solid #234f41;outline-offset:3px}
.demo-landing{max-width:1050px}
.demo-lead{max-width:750px;margin:0 0 10px;color:#435c4e;font-size:18px;line-height:1.7}
.demo-sample-language{margin:0 0 30px;color:#52665a;font-size:14px;line-height:1.6}
.demo-message{max-width:850px;margin:20px 0 28px;padding:16px 18px;border:1px solid #baa16a;border-radius:9px;background:#fff3d7;color:#493911;line-height:1.6;overflow-wrap:anywhere}
.demo-message p{margin:5px 0 0}
.demo-message-error{background:#fff0ed;border-color:#c18377;color:#782e24}
.demo-resume{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;padding:20px 22px;margin:0 0 32px;border:1px solid #8cae98;border-radius:11px;background:#e9f3ec}
.demo-resume h2{margin:0 0 7px;font-size:20px;line-height:1.35}
.demo-resume p{max-width:620px;margin:0;color:#435c4e;line-height:1.6}
.demo-resume .demo-button{flex:0 0 auto}
.demo-section-heading{margin:0 0 18px;font-size:22px;line-height:1.4;letter-spacing:-.3px}
.demo-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.demo-role-card{display:flex;flex-direction:column;min-width:0;padding:26px;border:2px solid #8aaa95;border-radius:13px;background:#fff;box-shadow:0 3px 9px #19332d0a}
.demo-role-label{align-self:flex-start;margin-bottom:14px;padding:5px 9px;border-radius:5px;background:#e6f0e9;color:#234f41;font-size:12px;font-weight:700;line-height:1.4}
.demo-role-card h3{margin:0 0 10px;color:#19332d;font-size:25px;line-height:1.3;letter-spacing:-.45px;overflow-wrap:anywhere}
.demo-role-card p{margin:0;color:#435c4e;font-size:15px;line-height:1.65}
.demo-role-card ul{flex:1;margin:18px 0 26px;padding-left:20px;color:#435c4e;font-size:15px;line-height:1.7}
.demo-role-card li+li{margin-top:8px}
.demo-role-card form{margin:0}
.portal-page .demo-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;max-width:100%;padding:12px 18px;border:1px solid #234f41;border-radius:8px;background:#234f41;color:#fff;font:inherit;font-weight:650;line-height:1.45;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.demo-role-card .demo-button{width:100%}
.portal-page .demo-button:hover{background:#193e30;border-color:#193e30}
.portal-page .demo-button:focus-visible{outline:3px solid #b07121;outline-offset:4px}
.demo-about{max-width:850px;margin-top:32px;padding-top:25px;border-top:1px solid #c8d5cb}
.demo-about h2{font-size:21px;line-height:1.4;margin:0 0 12px}
.demo-about p{color:#435c4e;line-height:1.7;margin:9px 0}
.demo-about .demo-limits{font-size:13px}
.demo-back-link{margin:24px 0 0;font-size:14px}
.demo-back-link a{display:inline-flex;align-items:center;gap:6px;min-height:44px;text-underline-offset:4px}
@media(max-width:1000px){.demo-banner-inner{align-items:flex-start;flex-direction:column;gap:12px}.demo-controls{justify-content:flex-start}.demo-resume{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){.demo-role-grid{grid-template-columns:minmax(0,1fr);gap:16px}.demo-role-card{padding:22px}.demo-role-card h3{font-size:23px}.demo-lead{font-size:16px;line-height:1.65}.demo-banner-inner{padding:14px 5vw}.demo-banner-copy .demo-banner-title{font-size:13px}.demo-resume{padding:18px}.demo-resume .demo-button{width:100%}.demo-session-summary{gap:3px 10px}}
@media(max-width:380px){.demo-controls{display:grid;grid-template-columns:minmax(0,1fr);width:100%}.demo-controls form,.demo-banner .demo-control{width:100%}.demo-role-card{padding:18px}.demo-banner-copy .demo-banner-title{align-items:flex-start}}