/* Focused material and light treatment for School and the member workspace. */
body[data-surface=school] .capture-hero{position:relative;isolation:isolate}
body[data-surface=school] .capture-hero::before{content:"";position:absolute;inset:2% -2% 4% 20%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 75% 35%,#c59a6530,transparent 62%),radial-gradient(ellipse at 20% 75%,#ffffffa6,transparent 55%);border-radius:40px}
body[data-surface=school] .capture-plan{background:radial-gradient(ellipse at 100% 0,#aa876038,transparent 62%),linear-gradient(145deg,#382b23,#251d1a 65%);border:1px solid #bda08080;box-shadow:0 2px 2px #ffffff35 inset,0 22px 65px -30px #65452b85,0 0 32px -15px #bd936b75}
body[data-surface=school] :is(.academy-device-visual,.tool-device-visual){position:relative;border:1px solid #c0a07e;border-radius:24px;box-shadow:0 1px 0 #fff inset,0 28px 64px -35px #47332280,0 0 28px -14px #b58b6370}
body[data-surface=school] :is(.academy-device-visual,.tool-device-visual) img{transform-origin:50% 55%}
body[data-surface=school] :is(.capture-example,.capture-feature-list>article){border:1px solid transparent;background:linear-gradient(145deg,#fffcf8f5,#f0e9def5) padding-box,linear-gradient(135deg,#fff,#c7ad90 52%,#e5d8c8) border-box;box-shadow:0 1px 0 #fff inset,0 16px 38px -30px #5d402c70}
body[data-surface=school] .school-primary,body[data-surface=account] .member-button{background:linear-gradient(135deg,#745536,#493526);color:#fffaf3;border:1px solid #b49068;box-shadow:0 1px 0 #dfbd8b65 inset,0 6px 16px -9px #573a25aa}
body[data-surface=account] .company-next{background:radial-gradient(ellipse at 95% 0,#ac835447,transparent 60%),linear-gradient(130deg,#362920,#251d1a 70%);border:1px solid #aa876080;box-shadow:0 1px 0 #dfbd8b36 inset,0 22px 48px -32px #513a28a6}
body[data-surface=account] .company-progress{background:linear-gradient(145deg,#ffffff12,#ffffff05);border-color:#c4a37a66;box-shadow:0 1px 0 #ffffff18 inset}
body[data-surface=account] :is(.member-card,.company-access>article){border:1px solid transparent;background:linear-gradient(145deg,#fffdf9,#f5efe6) padding-box,linear-gradient(145deg,#fff,#c6ab8d 60%,#e5d7c8) border-box;box-shadow:0 1px 0 #fff inset,0 14px 34px -27px #53392165}
body[data-surface=account] .member-card:focus-within{border-color:#96704b;box-shadow:0 0 0 3px #aa87602b,0 16px 34px -24px #76533070}
body[data-surface=account] .member-course-status{border:1px solid #c8ad8d;background:linear-gradient(135deg,#fffaf1,#ebdcc8);color:#59422d;border-radius:100px;padding:6px 12px;align-self:flex-start}
body[data-surface=account] :is(.company-feedback,#catalog-status,#member-message):not(:empty){width:fit-content;max-width:100%;box-sizing:border-box;border:1px solid #c6ad8e;border-radius:16px;background:#fffaf2;color:#493626;padding:12px 16px;box-shadow:0 8px 26px -18px #49362690;overflow-wrap:anywhere;font-size:1rem}
@supports(backdrop-filter:blur(12px)){body[data-surface=account] .company-progress{backdrop-filter:blur(12px)}}
@media(hover:hover) and (pointer:fine){body[data-surface=school] :is(.capture-example,.academy-device-visual,.tool-device-visual):hover,body[data-surface=account] :is(.member-card,.company-access>article):hover{border-color:#b18c62;box-shadow:0 0 0 1px #c7a17422,0 20px 42px -28px #76533085,0 0 24px -14px #b98d60aa}}
@media(prefers-reduced-motion:no-preference){body[data-surface=school] :is(.capture-example,.academy-device-visual,.tool-device-visual,.school-primary),body[data-surface=account] :is(.member-card,.company-access>article,.member-button){transition:border-color .4s ease,box-shadow .5s ease,background-color .25s ease}body[data-surface=account] .member-button:active,body[data-surface=school] .school-primary:active{transform:translateY(1px)}}
@media(max-width:650px){body[data-surface=school] .capture-hero::before{inset:20% 0 0 0}body[data-surface=school] :is(.academy-device-visual,.tool-device-visual){border-radius:18px}body[data-surface=account] :is(.company-feedback,#catalog-status,#member-message):not(:empty){width:100%}}
@media(forced-colors:active){body[data-surface=school] .capture-hero::before{display:none}body[data-surface=school] :is(.capture-plan,.capture-example,.school-primary),body[data-surface=account] :is(.company-next,.company-progress,.member-card,.member-button,.company-access>article){background:Canvas;color:CanvasText;border:1px solid ButtonText;box-shadow:none}}

/* Light follows interaction; the underlying content remains an ordinary usable card. */
body[data-surface] :is(.academy-device-visual,.tool-device-visual,.catalog-card,.member-card,.capture-plan,.company-next){position:relative;isolation:isolate}
body[data-surface] :is(.academy-device-visual,.tool-device-visual){border-radius:24px;overflow:hidden;border:1px solid #c6ad8b;box-shadow:0 2px 0 #fff9 inset,0 30px 70px -38px #593e2c85}
body[data-surface] .catalog-card{border:1px solid #d5c1a7;border-radius:22px;background:linear-gradient(145deg,#fffdf9,#f4eee5);box-shadow:0 1px 0 #fff inset,0 16px 42px -30px #60432f66}
body[data-surface] :is(.capture-plan,.company-next)::after{content:"";position:absolute;right:20px;top:22px;width:145px;height:145px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle at 32% 25%,#fff6db55,transparent 38%),radial-gradient(circle at 65% 75%,#a27b6840,transparent 65%);box-shadow:inset 0 0 22px #dab47a26,0 0 55px #ca9d5f18;border:1px solid #edc99125}
body[data-surface] .ds-light-reveal::after{animation:ds-light-arrival 4.5s ease-out 1}
@keyframes ds-light-arrival{0%{opacity:0;transform:translateY(10px) scale(.94)}35%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(hover:hover) and (pointer:fine){
 body[data-surface] :is(.catalog-card,.member-card):hover{box-shadow:0 1px 0 #fff inset,0 24px 48px -28px #60432f80,0 0 24px -14px #b18c62aa;border-color:#aa8760}
}
@media(prefers-reduced-motion:no-preference){
 body[data-surface] :is(.academy-device-visual,.tool-device-visual) img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
 body[data-surface] :is(.catalog-card,.member-card){transition:box-shadow .45s ease,border-color .35s ease,translate .45s ease}
 @media(hover:hover) and (pointer:fine){body[data-surface] :is(.academy-device-visual,.tool-device-visual):hover img{transform:scale(1.018)}body[data-surface] :is(.catalog-card,.member-card):hover{translate:0 -3px}}
}
@media(prefers-reduced-motion:reduce){body[data-surface] .ds-light-reveal::after{animation:none!important}}
html.motion-paused body[data-surface] :is(.academy-device-visual,.tool-device-visual,.catalog-card,.member-card){translate:none!important}
html.motion-paused body[data-surface] :is(.academy-device-visual,.tool-device-visual) img{transform:none!important}
html.motion-paused body[data-surface] .ds-light-reveal::after{animation:none!important}
@media(max-width:650px){body[data-surface] :is(.capture-plan,.company-next)::after{width:100px;height:100px;right:12px;top:12px}}
@media(forced-colors:active){body[data-surface] :is(.academy-device-visual,.tool-device-visual,.catalog-card,.member-card,.capture-plan,.company-next)::after{display:none}}

/* Classroom: consistent material, clearer current step and finite outcome feedback. */
body[data-surface=classroom] .course-steps{border:1px solid #d5c7b5;background:linear-gradient(125deg,#f9f6f0f5,#e8dfd2f5);box-shadow:0 1px 0 #fff inset,0 12px 32px -26px #59402b80}
body[data-surface=classroom] .course-steps button[aria-current=step]{background:linear-gradient(135deg,#493629,#251d1a);box-shadow:0 1px 0 #e1bd8945 inset,0 5px 15px -9px #251d1aaa}
body[data-surface=classroom] .lesson-menu{background:linear-gradient(145deg,#f4eee5,#e8dfd2);border:1px solid #d5c7b5;box-shadow:0 1px 0 #fff inset}
body[data-surface=classroom] .lesson-menu button[aria-current=step]{background:linear-gradient(110deg,#fffdf8,#f2e5d3);box-shadow:inset 3px 0 #aa8760,0 5px 16px -11px #62442b66;border-radius:10px}
body[data-surface=classroom] .course-panel{border:1px solid #d9cbbb;background:linear-gradient(145deg,#fffdf9,#f8f4ed);box-shadow:0 1px 0 #fff inset,0 24px 56px -42px #513a2870}
body[data-surface=classroom] .course-example{border:1px solid #e2d3bf;background:linear-gradient(115deg,#f2e8da,#faf5eb)}
body[data-surface=classroom] #game-progress{height:10px;overflow:hidden;box-shadow:0 1px 3px #62442b15 inset}
body[data-surface=classroom] #game-progress::-webkit-progress-value{background:linear-gradient(90deg,#765536,#b58c59,#d9bb88);border-radius:10px;box-shadow:0 0 10px #b58c5955}
body[data-surface=classroom] #game-progress::-moz-progress-bar{background:linear-gradient(90deg,#765536,#b58c59,#d9bb88);border-radius:10px}
body[data-surface=classroom] .mission-option[aria-pressed=true]{background:linear-gradient(130deg,#493629,#251d1a);border-color:#b59165;box-shadow:0 1px 0 #e1bd8933 inset,0 8px 22px -16px #573b2390}
body[data-surface=classroom] .challenge-won>h3{background:radial-gradient(ellipse at 90% 0,#aa876052,transparent 65%),linear-gradient(125deg,#3c2d22,#251d1a);border:1px solid #b89468;box-shadow:0 1px 0 #ebc99433 inset,0 14px 30px -24px #68472ba0;animation:none}
body[data-surface=classroom] .certificate-preview{background:radial-gradient(ellipse at 100% 0,#e3c89a3b,transparent 60%),#fffcf6;border:1px solid #bb9a70;box-shadow:0 1px 0 #fff inset,0 22px 50px -35px #75543485;border-radius:16px}
body[data-surface=classroom] :is(.course-button,.course-secondary,.mission-option):focus-visible{outline:3px solid #87603b;outline-offset:4px}
@supports(backdrop-filter:blur(12px)){body[data-surface=classroom] .course-steps{backdrop-filter:blur(12px)}}
@media(prefers-reduced-motion:no-preference){
 body[data-surface=classroom] :is(.course-steps button,.lesson-menu button,.mission-option){transition:background-color .25s ease,box-shadow .3s ease,border-color .25s ease}
 body[data-surface=classroom] #game-progress::-webkit-progress-value{transition:width .4s cubic-bezier(.22,.61,.36,1)}
 body[data-surface=classroom] .course-button:active:not(:disabled){translate:0 1px}
}
@media(forced-colors:active){body[data-surface=classroom] :is(.course-panel,.course-steps,.lesson-menu,.certificate-preview,.challenge-won>h3){background:Canvas;color:CanvasText;box-shadow:none;border-color:CanvasText}body[data-surface=classroom] :is(.mission-option[aria-pressed=true],.course-steps button[aria-current=step],.lesson-menu button[aria-current=step]){background:Highlight;color:HighlightText}}

/* Compact summaries replace the former interactive marketing examples. */
body[data-surface=school] .capture-example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
body[data-surface=school] .capture-example{display:block;min-width:0}
body[data-surface=school] .capture-example-copy{height:100%;box-sizing:border-box;padding:28px}
body[data-surface=school] .capture-example-copy h3{margin-top:16px}
body[data-surface=school] .capture-example-copy a{display:inline-block;margin-top:18px;min-height:44px;align-content:center}
@media(max-width:650px){body[data-surface=school] .capture-example-grid{grid-template-columns:1fr}body[data-surface=school] .capture-example-copy{padding:24px}}

/* School benefits: comfortable reading space inside every card. */
body[data-surface=school] .capture-feature-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
body[data-surface=school] .capture-feature-list>article{min-width:0;box-sizing:border-box;padding:28px 24px;border:1px solid #ded1bf;border-radius:20px;background:#faf7f1;box-shadow:0 6px 18px -14px #49352645}
body[data-surface=school] .capture-feature-list h3{margin:0 0 14px;font:600 1.125rem/1.4 Manrope,sans-serif;letter-spacing:-.02em;color:#251d1a;text-wrap:balance;overflow-wrap:break-word}
body[data-surface=school] .capture-feature-list p{margin:0;font-size:1rem;line-height:1.7;color:#61564c;overflow-wrap:break-word}
@media(hover:hover) and (pointer:fine){body[data-surface=school] .capture-feature-list>article:hover{transform:none;border-color:#baa185;box-shadow:0 8px 22px -16px #49352655}}
@media(max-width:1150px){body[data-surface=school] .capture-feature-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body[data-surface=school] .capture-feature-list{grid-template-columns:1fr;gap:16px}body[data-surface=school] .capture-feature-list>article{padding:24px}}
@media(forced-colors:active){body[data-surface=school] .capture-feature-list>article{background:Canvas;border-color:CanvasText;box-shadow:none}body[data-surface=school] .capture-feature-list :is(h3,p){color:CanvasText}}

/* A concise enrollment summary beside the School introduction. */
body[data-surface=school] .school-access-card::after{display:none}
body[data-surface=school] .school-access-card .capture-plan-content{padding:30px}
body[data-surface=school] .school-access-card h2{font-size:clamp(1.8rem,2.6vw,2.5rem);margin:8px 0 24px}
body[data-surface=school] .school-access-benefits{list-style:none;padding:0;margin:0 0 28px}
body[data-surface=school] .school-access-benefits li{position:relative;display:block;border:0;padding:0 0 0 28px;margin:0 0 16px;font-size:1rem;line-height:1.55;color:#f4f0e8}
body[data-surface=school] .school-access-benefits li::before{content:"";position:absolute;left:2px;top:.4em;width:7px;height:12px;border:solid #d3b591;border-width:0 2px 2px 0;transform:rotate(45deg)}
body[data-surface=school] .school-access-card .school-entry-button{display:flex;width:100%;box-sizing:border-box;justify-content:center;text-align:center;min-height:54px;background:#e5c99f;color:#251d1a;border:1px solid #e5c99f;border-radius:12px;padding:14px 18px;font-size:1rem;line-height:1.5;box-shadow:none}
body[data-surface=school] .school-access-card .school-entry-button:hover{background:#e5c99f;color:#251d1a;border-color:#f4e1c4;box-shadow:0 4px 14px -8px #0006;transform:none}
body[data-surface=school] .school-access-card .school-entry-button:focus-visible{outline:3px solid #f4f0e8;outline-offset:4px}
body[data-surface=school] .school-access-card .school-access-note{margin:14px 0 0;text-align:center;font-size:.875rem;line-height:1.5;color:#d7c9b8}
@media(max-width:600px){body[data-surface=school] .school-access-card .capture-plan-content{padding:24px}}
@media(forced-colors:active){body[data-surface=school] .school-access-card .school-entry-button,body[data-surface=school] .school-access-card .school-entry-button:hover{background:ButtonFace;color:ButtonText;border-color:ButtonText;box-shadow:none}body[data-surface=school] .school-access-benefits li,body[data-surface=school] .school-access-card .school-access-note{color:CanvasText}body[data-surface=school] .school-access-benefits li::before{border-color:CanvasText}}