/* The hero demonstrates a product benefit in a focused scene; the detailed
   process below keeps the isometric flow diagram. */
.hero-scene{--scene:#20372e;position:relative;container-type:inline-size;isolation:isolate;overflow:hidden;width:100%;color:#edf1e5;background:var(--scene);border:1px solid #506955;border-radius:3px}
.hero-scene-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:23px 24px 0;font:11px/1.6 var(--mono);color:#d4dfc9}
.hero-scene-count{color:#efa58a;font-size:10px;white-space:nowrap}
.hero-scene-stage{position:relative;perspective:1000px;height:clamp(340px,70cqw,400px);margin:4px 9px 0;background-image:linear-gradient(#a0bd9809 1px,transparent 1px),linear-gradient(90deg,#a0bd9809 1px,transparent 1px);background-size:25px 25px}
.hero-scene-train .hero-scene-stage{height:clamp(370px,74cqw,410px)}
.hero-engine{position:relative;display:grid;grid-template-columns:34% minmax(0,1fr);align-items:center;min-height:113px;margin:17px 20px 0;padding:6px 15px 6px 0;pointer-events:none;background:radial-gradient(ellipse at 20% 50%,#b9c9aa10,transparent 75%)}
.hero-engine-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;pointer-events:none}
.hero-engine-model{min-width:0}.hero-engine-model .aero-core-svg{height:100px}
.hero-engine-copy{min-width:0;padding-block:10px;display:grid;align-content:center}
.hero-engine-copy>span{font:8px var(--mono);letter-spacing:.08em;color:#b4c7a5;margin-bottom:9px}
.hero-core-state{grid-area:2/1;visibility:hidden}
.hero-core-state b{display:block;font:400 clamp(10px,2.8cqw,14px)/1.45 var(--mono);letter-spacing:-.03em;color:#edf1e4}
.hero-core-state small{display:block;font:10px/1.55 var(--sans);color:#afc1a6;margin-top:5px}
.hero-scene[data-phase="0"] .hero-core-state-0,.hero-scene[data-phase="1"] .hero-core-state-1,.hero-scene[data-phase="2"] .hero-core-state-2{visibility:visible}
.hero-core-progress{display:flex;gap:5px;margin-top:11px;max-width:120px}
.hero-core-progress i{height:2px;flex:1;background:#5d7259}
.hero-scene[data-phase="0"] .hero-core-progress i:first-child,.hero-scene[data-phase="1"] .hero-core-progress i:nth-child(-n+2),.hero-scene[data-phase="2"] .hero-core-progress i{background:#d9a183}
.scene-paper{color:#2c4431;background:#edf1e4;border:1px solid #b8c9ac;border-radius:4px;box-shadow:4px 5px 0 #92a68d,10px 20px 35px #081a1b45;transform-style:preserve-3d}
.scene-window-bar{display:flex;justify-content:space-between;gap:10px;align-items:center;font:clamp(7px,1.65cqw,9px)/1.5 var(--mono);color:#6b8060;border-bottom:1px solid #cbd7c2;padding-bottom:11px;letter-spacing:.02em}
.hero-scene .scene-paper h3{font:400 clamp(17px,4cqw,22px)/1.35 var(--mono);letter-spacing:-.05em}
.scene-cursor{position:absolute;width:22px;height:28px;fill:#b6553b;stroke:#fff5dd;stroke-width:1.5;filter:drop-shadow(1px 2px 2px #243b3022);pointer-events:none}
.compliance-spec{position:absolute;left:10%;top:17%;width:72%;padding:19px;transform:rotateX(7deg) rotateY(-10deg) rotateZ(-4deg);transform-origin:center;transition:transform .9s var(--ease),opacity .9s}
.compliance-spec h3{margin:18px 0 14px}
.spec-exigence{display:grid;grid-template-columns:58px minmax(0,1fr) 5px;gap:8px;align-items:center;padding:12px 0;border-top:1px solid #d0dbc8;font:clamp(10px,2.4cqw,13px)/1.4 var(--sans)}
.spec-exigence small{font:clamp(7px,1.65cqw,9px) var(--mono);color:#798d6a}
.spec-exigence i{height:5px;width:5px;border-radius:50%;background:#92a683}
.hero-spec-scan{position:absolute;left:14px;right:14px;top:85px;height:2px;background:#bc7256;box-shadow:0 -7px 18px #df986e35;opacity:0;transform:translateY(0)}
.hero-scene[data-phase="0"] .hero-spec-scan{animation:hero-specification-read 5s ease .5s both}
.document-corner{position:absolute;right:0;top:0;width:18px;height:18px;background:linear-gradient(45deg,#d0dbc5 50%,#20372e 51%);border-bottom-left-radius:2px}
.compliance-code{position:absolute;right:5%;top:34%;width:68%;padding:18px;background:#293d36;color:#d5e2c6;border-color:#829a74;box-shadow:5px 5px 0 #152b25,12px 20px 35px #081a1b66;transform:rotateY(-5deg) rotateZ(5deg)}
.compliance-code .scene-window-bar{color:#b0c79b;border-color:#4f6755}
.compliance-code pre{font:clamp(10px,2.3cqw,12px)/1.75 var(--mono);padding:16px 0 11px;white-space:pre-wrap}
.compliance-code pre span{color:#f0a48a}.compliance-code pre em{font-style:normal;color:#d8b681}
.code-connection{display:flex;gap:8px;align-items:center;font:9px var(--sans);color:#b0c79b;border-top:1px solid #4f6755;padding-top:11px}
.code-connection i{width:5px;height:5px;border-radius:50%;background:#efac8c}
.hero-scene-pliance[data-phase="1"] .compliance-spec{transform:translate(-8%,-7%) rotateY(-12deg) rotateZ(-7deg) scale(.91)}
.hero-scene-pliance[data-phase="2"] .compliance-spec{transform:translate(-7%,-11%) rotateY(-10deg) rotateZ(-9deg) scale(.86);opacity:.35}
.hero-scene-pliance[data-phase="2"] .compliance-code{opacity:.22!important;transform:translate(2%,2%) rotateZ(8deg) scale(.9)}
.compliance-dossier{position:absolute;left:12%;top:14%;width:78%;padding:16px;transform:rotateX(3deg) rotateZ(-1deg)}
.compliance-dossier h3{margin:12px 0 13px}
.hero-matrix>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid #c9d7bd;font:clamp(9px,2.3cqw,12px) var(--sans)}
.hero-matrix b{padding:4px 6px;border-radius:2px;font:clamp(8px,1.9cqw,10px) var(--sans);white-space:nowrap}
.hero-matrix .linked{background:#dbe7cd;color:#3d6739}.hero-matrix .gap{background:#f0dbc7;color:#9d4a30}
.dossier-note{margin-top:14px;display:flex;align-items:center;gap:8px;font:clamp(8px,2cqw,10px)/1.5 var(--sans);color:#806544}
.dossier-note>span{display:grid;place-items:center;width:19px;height:19px;flex-shrink:0;border:1px solid #c6a880;border-radius:50%;color:#a84a32}
.hero-scene .compliance-code.is-new{animation:hero-code-enter 1s var(--ease) both}
.hero-scene .compliance-dossier.is-new{animation:hero-dossier-enter 1.2s var(--ease) both}
.test-window{position:relative;padding:17px;background:#edf1e4;min-height:202px;transition:transform 1s var(--ease),opacity 1s}
.reference-window{position:absolute;left:7%;top:17%;width:77%;transform:rotateY(-12deg) rotateZ(-4deg)}
.test-window-status{color:#b26948;font-size:7px}
.test-control{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.test-control small{display:block;color:#718761;font:7px var(--mono);letter-spacing:.06em}
.test-control strong{position:relative;display:flex;gap:8px;align-items:baseline;margin-top:6px;font:27px/1 var(--mono);font-weight:400;min-width:110px}
.test-control strong>span{width:3ch}.test-value-before{position:absolute;left:0;opacity:0}.test-control em{font:11px var(--sans);font-style:normal;color:#79926c}
.test-apply{background:#35553e;color:#ecf0e0;border:1px solid #627f57;border-radius:3px;padding:10px 11px;font:10px var(--sans)}
.hero-test-graph{display:block;width:100%;height:58px;margin-top:13px;overflow:visible;fill:none}
.graph-grid{stroke:#cdd9c3;stroke-width:1}.graph-trace{stroke:#7d9b67;stroke-width:2;stroke-linecap:round}
.test-signal{display:flex;align-items:center;gap:7px;font:9px var(--sans);color:#627d54;margin-top:2px}
.test-signal i{height:6px;width:6px;border-radius:50%;background:#8dab75}
.test-window .scene-cursor{top:82px;right:37px;transform:translate(-50px,20px)}
.replay-window{position:absolute;right:5%;top:35%;width:77%;transition:transform 1s var(--ease)}
.replay-window .test-window{transform:rotateX(4deg) rotateY(-3deg) rotateZ(3deg)}
.hero-scene .replay-window.is-new{animation:hero-replay-enter 1s var(--ease) both}
.hero-scene-verify[data-phase="1"] .reference-window{transform:translate(-3%,-13%) rotateZ(-7deg) scale(.86)}
.hero-scene-verify[data-phase="2"] .reference-window{transform:translate(-4%,-20%) rotateZ(-7deg) scale(.82);opacity:.35}
.hero-scene-verify[data-phase="2"] .replay-window{transform:translateY(-28%) scale(.94)}
.hero-scene-verify[data-phase="0"] .reference-window .scene-cursor,.hero-scene-verify[data-phase="1"] .replay-window .scene-cursor{animation:hero-test-action 4.4s var(--ease) .5s both}
.hero-scene-verify[data-phase="0"] .reference-window .test-value-before,.hero-scene-verify[data-phase="1"] .replay-window .test-value-before{animation:value-before 4.4s step-end .5s both}
.hero-scene-verify[data-phase="0"] .reference-window .test-value-after,.hero-scene-verify[data-phase="1"] .replay-window .test-value-after{animation:value-after 4.4s step-end .5s both}
.hero-scene-verify[data-phase="0"] .reference-window .graph-trace,.hero-scene-verify[data-phase="1"] .replay-window .graph-trace{animation:graph-response 4.4s ease .5s both}
.test-evidence{position:absolute;left:9%;right:7%;bottom:6%;display:flex;align-items:center;gap:12px;padding:15px;transform:rotateZ(-2deg);box-shadow:3px 4px 0 #92a68d,8px 15px 25px #081a1b45}
.evidence-check{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#d4e3c4;color:#486b35;font:23px var(--sans)}
.test-evidence small{display:block;font:7px var(--mono);color:#79916d;margin-bottom:6px}.test-evidence strong{font:clamp(11px,2.8cqw,15px)/1.4 var(--mono);letter-spacing:-.04em}.test-evidence div>span{display:block;font:8px/1.6 var(--sans);color:#708465;margin-top:5px}
.evidence-sheets{display:flex;flex-shrink:0;position:relative;width:32px;height:36px;margin-left:auto}.evidence-sheets i{position:absolute;inset:0;border:1px solid #a9bc99;background:repeating-linear-gradient(#e1e9d8 0 7px,#b5c4a7 8px 9px);transform:rotate(9deg)}.evidence-sheets i+ i{transform:translate(-4px,-3px) rotate(-4deg)}
.hero-scene .test-evidence.is-new{animation:hero-evidence-enter 1s var(--ease) .5s both}
/* Training starts with two alternative sources, then builds the exercise. */
.training-inputs{position:absolute;inset:11% 9% auto;transition:transform .9s var(--ease),opacity .9s}
.training-source{padding:17px 19px;transform:rotateZ(-3deg);transition:transform .8s}
.training-source>strong{display:block;font:clamp(13px,3.2cqw,17px)/1.4 var(--mono);margin:12px 0 10px;letter-spacing:-.04em}
.training-record{display:flex;gap:8px;font:10px/1.7 var(--sans);color:#627b54}.training-record i{font-style:normal;color:#426b32}
.training-or{display:block;text-align:center;margin:11px 0;font:10px var(--mono);color:#c3d6b1}
.source-usage{transform:translateX(8px) rotateZ(2deg)}
.source-recording{display:flex;align-items:center;gap:7px;font:clamp(8px,2cqw,10px) var(--sans);color:#627b54}
.source-recording i{display:grid;place-items:center;font:8px var(--mono);font-style:normal;background:#dae6cf;width:22px;height:22px;flex-shrink:0}
.source-recording b{font-weight:400;color:#a86a4c}
.hero-scene-train[data-phase="1"] .training-inputs{transform:translate(-4%,-6%) rotateZ(-4deg) scale(.94);opacity:.16}
.hero-scene-train[data-phase="2"] .training-inputs{opacity:.08;transform:scale(.94)}
.training-builder{position:absolute;left:9%;right:7%;top:15%;padding:17px 20px;transform:rotateZ(-1deg)}
.training-builder h3{margin:12px 0}
.learning-chapter{display:flex;gap:12px;align-items:center;padding:8px 0;border-top:1px solid #c7d5bb}
.learning-chapter>span{display:grid;place-items:center;width:28px;height:30px;background:#dce6d2;font:10px var(--mono);flex-shrink:0}
.learning-chapter strong{font:clamp(10px,2.7cqw,13px) var(--sans);display:block;font-weight:500}.learning-chapter small{display:block;font:9px var(--sans);color:#7b906a;margin-top:4px}
.learning-chapter>b{margin-left:auto;font:12px var(--sans);color:#759a5e}.builder-provenance{margin-top:10px;font:8px var(--mono);color:#74896a}
.hero-scene-train[data-phase="1"] .learning-chapter{animation:chapter-assemble 1s var(--ease) both}
.hero-scene-train[data-phase="1"] .learning-chapter:nth-of-type(3){animation-delay:.45s}.hero-scene-train[data-phase="1"] .learning-chapter:nth-of-type(4){animation-delay:.9s}
.hero-scene-train[data-phase="2"] .training-builder{opacity:.18!important;transform:translate(-3%,-2%) rotateZ(-6deg) scale(.95)}
.hero-scene .training-builder.is-new,.hero-scene .learning-player.is-new{animation:hero-training-enter 1s var(--ease) both}
.learning-player{position:absolute;left:9%;right:7%;top:14%;height:286px;padding:17px 20px;transform:rotateY(-8deg) rotateZ(-2deg);transition:transform 1s var(--ease)}
.learning-player .scene-window-bar{padding-bottom:8px}
.learning-progress{display:flex;gap:5px;margin-top:11px}.learning-progress i{display:block;flex:1;height:3px;background:#d0ddc5}.learning-progress i:first-child{background:#8ca474}
.exercise-eyebrow{display:block;margin-top:16px;color:#aa6241;font:8px var(--mono);letter-spacing:.04em}
.learning-player h3{margin-top:9px}.learning-player>p{font:10px var(--sans);color:#778b69;margin-top:7px}
.exercise-options{display:flex;gap:10px;position:absolute;left:20px;right:20px;top:171px;transition:opacity .3s}
.exercise-options>span{display:flex;position:relative;align-items:baseline;justify-content:center;gap:6px;flex:1;padding:11px 8px;background:#e5ecdc;border:1px solid #b2c6a2;border-radius:3px;color:#46623c;font:17px var(--mono)}
.exercise-options small{font:9px var(--sans);color:#77906b}.exercise-answer b{position:absolute;right:7px;top:4px;color:#456c39;font:11px var(--sans);opacity:0}
.exercise-feedback{position:absolute;left:20px;right:20px;top:170px;display:flex;align-items:center;gap:11px;padding:11px;background:#dce9ce;color:#3b5c2e;border:1px solid #acc99a;border-radius:3px;opacity:0}
.exercise-feedback>span{font:22px var(--sans)}.exercise-feedback strong{display:block;font:14px var(--mono)}.exercise-feedback small{display:block;font:9px var(--sans);margin-top:4px}
.exercise-continue{position:absolute;left:20px;right:20px;bottom:17px;display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:#37553d;color:#e7efd9;font:10px var(--sans);border-radius:3px}
.learning-player .scene-cursor{top:196px;right:27px;opacity:0}
.hero-scene-train[data-phase="2"] .learning-player{transform:rotateY(0) rotateZ(0)}
.hero-scene-train[data-phase="2"] .learning-player .scene-cursor{animation:hero-learner-action 4.5s var(--ease) 1s both}
.hero-scene-train[data-phase="2"] .exercise-answer{animation:hero-answer-select 4.5s ease 1s both}
.hero-scene-train[data-phase="2"] .exercise-answer b{animation:hero-answer-tick 4.5s ease 1s both}
.hero-scene-train[data-phase="2"] .learning-progress i:nth-child(2){background:#8ca474}
.hero-scene-train[data-phase="2"] .exercise-options{opacity:0;animation:training-options 5.5s step-end both}
.hero-scene-train[data-phase="2"] .exercise-feedback{opacity:1;animation:training-feedback 5.5s step-end both}
.hero-scene-train[data-phase="2"] .exercise-continue{background:#456b3b}
.hero-scene-caption{display:grid;padding:20px 24px 18px;min-height:126px}
.hero-scene-message{grid-area:1/1}.hero-scene-message[hidden]{display:block;visibility:hidden;pointer-events:none}
.hero-scene-message strong{display:block;font:400 18px/1.5 var(--mono);letter-spacing:-.04em;color:#e9eee0}
.hero-scene-message p{font:12px/1.8 var(--sans);color:#b9cab0;margin-top:8px}
.hero-scene-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 22px;padding:12px 0;border-top:1px solid #4c6652}
.hero-scene-steps{display:flex;gap:14px;align-items:center;min-width:0}
.hero-scene-step{display:inline-flex;align-items:center;gap:6px;padding:9px 0;position:relative;background:none;border:0;cursor:pointer;color:#9fb594;font:9px var(--sans);white-space:nowrap}
.hero-step-dot{height:5px;width:5px;flex-shrink:0;background:#4c6952;border-radius:50%}
.hero-scene-step[aria-current="true"]{color:#f0d3b9}.hero-scene-step[aria-current="true"] .hero-step-dot{background:#efa58a;box-shadow:0 0 0 3px #efa58a16}
.hero-scene-play{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border:1px solid #839773;color:#e6eedd;background:transparent;cursor:pointer;font:13px var(--sans)}
.hero-scene-play:hover{background:#e6eedd;color:#20372e}.hero-scene-step:hover{color:#e6eedd}
.hero-scene-step:focus-visible,.hero-scene-play:focus-visible{outline:2px solid #eeb795;outline-offset:3px}
.hero-illustration-note{font:9px var(--sans);color:#b2c4a6;margin:0;padding:0 24px 17px}
@keyframes hero-specification-read{0%,100%{opacity:0}10%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(125px)}}
@keyframes hero-code-enter{from{opacity:0;transform:translate(40px,20px) rotateZ(9deg)}to{opacity:1;transform:rotateY(-5deg) rotateZ(5deg)}}
@keyframes hero-dossier-enter{from{opacity:0;transform:translateY(30px) rotateZ(-5deg) scale(.92)}to{opacity:1;transform:rotateX(3deg) rotateZ(-1deg)}}
@keyframes hero-replay-enter{from{opacity:0;transform:translate(35px,20px)}to{opacity:1;transform:none}}
@keyframes hero-test-action{0%,20%{transform:translate(-100px,2px)}45%,65%{transform:translate(0,0)}85%,100%{transform:translate(-13px,68px)}}
@keyframes hero-evidence-enter{from{opacity:0;transform:translateY(24px) rotateZ(-5deg)}to{opacity:1;transform:rotateZ(-2deg)}}
@keyframes hero-learner-action{0%{opacity:0;transform:translate(12px,10px)}15%{opacity:1}40%,55%{opacity:1;transform:translate(-30px,-12px) scale(1)}60%{transform:translate(-30px,-12px) scale(.86)}70%{transform:translate(-30px,-12px) scale(1)}100%{opacity:1;transform:translate(-4px,40px)}}
@keyframes hero-answer-select{0%,60%{background:#e5ecdc;border-color:#b2c6a2}75%,100%{background:#d5e6c6;border-color:#71985b}}
@keyframes hero-answer-tick{0%,65%{opacity:0}76%,100%{opacity:1}}
@container(max-width:380px){.hero-scene-top{padding:18px 16px 0;font-size:10px;gap:10px}.hero-scene-stage{margin-inline:4px}.hero-engine{margin-inline:16px;padding-right:12px;grid-template-columns:32% minmax(0,1fr)}.hero-core-state small{font-size:9px}.hero-scene-caption{padding:18px 17px;min-height:142px}.hero-scene-message strong{font-size:17px}.hero-scene-controls{margin-inline:16px;gap:8px}.hero-scene-steps{gap:9px}.hero-scene-step{font-size:8px;gap:4px}.hero-illustration-note{padding-inline:17px}.compliance-spec{left:6%;width:81%;padding:15px}.spec-exigence{grid-template-columns:43px minmax(0,1fr) 4px;gap:6px}.compliance-code{width:77%;right:4%;padding:14px}.compliance-dossier{left:7%;width:86%;padding:16px}.hero-matrix>div{font-size:10px}.test-control strong{font-size:23px;min-width:86px}.test-apply{padding:8px;font-size:8px}.test-window{padding:13px;min-height:198px}.test-window-status{font-size:6px}.test-control small{font-size:6px}.test-evidence{padding:12px;gap:8px;left:6%;right:5%}.evidence-sheets{display:none}.evidence-check{height:26px;width:26px;font-size:18px}.test-evidence strong{font-size:12px}.learning-player{left:6%;right:5%;padding:16px 14px}.learning-player h3{font-size:19px}.exercise-options,.exercise-feedback,.exercise-continue{left:14px;right:14px}.exercise-feedback small{font-size:8px}.scene-window-bar{gap:5px}}
@media(prefers-reduced-motion:reduce){.hero-scene *{animation:none!important;transition:none!important}}

@keyframes chapter-assemble{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hero-training-enter{from{opacity:0;transform:translateY(26px) rotateZ(4deg) scale(.96)}to{opacity:1;transform:rotateZ(0)}}
@keyframes training-options{0%,81%{opacity:1}82%,100%{opacity:0}}
@keyframes training-feedback{0%,81%{opacity:0}82%,100%{opacity:1}}
@container(max-width:380px){.training-inputs{inset-inline:6%}.training-source{padding:14px}.training-record{font-size:9px}.training-builder{left:6%;right:5%;padding:15px}.learning-chapter{gap:9px;padding:10px 0}.learning-chapter strong{font-size:11px}.learning-chapter small{font-size:8px}.builder-provenance{font-size:7px}}