/* Original Shiner Ops visual learning system. All examples are inert teaching screens. */
[hidden]{display:none!important}.visual-heading{margin-bottom:30px}.visual-heading .lede{max-width:830px}.visual-lesson{border:1px solid #d4dcd0;border-radius:16px;background:#fffefa;overflow:hidden;margin-bottom:36px;box-shadow:0 14px 40px #203c2e07}.visual-titlebar{display:flex;justify-content:space-between;gap:25px;padding:27px 30px;border-bottom:1px solid #dce2d5}.visual-titlebar .eyebrow{color:#637c4f;font-size:9px;margin-bottom:10px}.visual-titlebar h2{font-size:27px;line-height:1.2;max-width:710px;margin-bottom:10px}.visual-titlebar p:last-child{font-size:13px;color:#65736c}.visual-format{font-size:8px;letter-spacing:.12em;line-height:1.8;color:#728366;text-align:right;padding-top:8px;flex-shrink:0}.visual-workbench{display:grid;grid-template-columns:minmax(0,1fr) 290px}.scene-column{min-width:0;background:#e9ece1}.scene-canvas{min-height:460px;padding:30px;display:flex;flex-direction:column;justify-content:center;gap:18px;overflow:hidden;background:radial-gradient(ellipse at 20% 0%,#f2f1e7,transparent 75%),#e4e9dc}.scene-explainer{padding:25px 21px;min-width:0;border-left:1px solid #dce2d5}.scene-explainer>.mini-label{font-size:8px;margin-bottom:17px}.scene-cue{padding:17px 0;border-top:1px solid #e0e5d9}.scene-cue summary{display:flex;align-items:flex-start;gap:12px;cursor:pointer;list-style:none;font-size:14px;font-weight:600;line-height:1.5}.scene-cue summary::-webkit-details-marker{display:none}.cue-number{flex-shrink:0;width:27px;height:27px;display:grid;place-items:center;border:1px solid #cbd4c1;border-radius:50%;font-size:11px;color:#627253}.scene-cue[open] .cue-number{background:#28433c;color:#f4f1dc;border-color:#28433c}.scene-cue[open] summary{color:#213f32}.scene-cue p{margin:14px 0 0 39px;font-size:13px;line-height:1.8;color:#53635a}.decision-jump{display:inline-block;margin-top:24px;font-size:11px}.story-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 26px 22px;gap:8px}.story-flow>span{padding:12px 9px 0;border-top:2px solid #c8d2be;display:flex;gap:7px;font-size:10px;line-height:1.5;color:#6b7c60;position:relative;transition:color .3s,border-color .3s}.story-flow b{font-size:9px;opacity:.7}.story-flow>span.is-current{color:#1e3c30;border-color:#526a39;font-weight:700}.story-flow>span.is-past{border-color:#7b9562}.scene-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 26px;border-top:1px solid #dce2d5}.player-buttons{display:flex;gap:7px}.play-scene,.step-scene{border:1px solid #cbd6c0;background:#f0f3e7;color:#244031;min-height:42px;border-radius:6px;padding:9px 14px;font-size:11px;font-weight:600}.play-scene{background:#18362f;color:#f3f0df;border-color:#18362f;min-width:166px}.step-scene{width:42px;padding:6px;font-size:18px}.step-scene:disabled{opacity:.35;cursor:default}.playback-status{font-size:10px;color:#66765c;margin:0;text-align:right}.scene-disclaimer{padding:12px 26px;font-size:9px;color:#6d7868;background:#f3f4ec;margin:0;border-top:1px solid #e4e8dc}.screen-window{border:1px solid #c2ccc0;border-radius:9px;background:#fff;box-shadow:0 12px 23px #2942300d;overflow:hidden;min-width:0}.window-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#eef1eb;border-bottom:1px solid #dce3d9;padding:11px 15px;color:#607060;font-size:9px}.window-dots{font-size:8px;letter-spacing:3px;color:#a4af9d;white-space:nowrap}.screen-content{padding:25px}.screen-label{font-size:8px;letter-spacing:.1em;font-weight:700;color:#6b7c61;display:block;margin-bottom:10px}.screen-content h3{font-size:21px;line-height:1.35;letter-spacing:-.025em;margin-bottom:20px}.screen-content p{font-size:12px;line-height:1.75;margin-bottom:12px;color:#53625b}.mail-toolbar{display:flex;justify-content:space-between;padding:10px 18px;font-size:9px;color:#71816d;border-bottom:1px solid #e5e9e2}.hotspot{width:100%;position:relative;text-align:left;display:flex;align-items:center;gap:12px;border:1px solid transparent;border-radius:7px;background:transparent;padding:12px;color:#264137;min-height:44px;font-size:12px;line-height:1.55;transition:box-shadow .35s,background .35s,border-color .35s,transform .35s;overflow-wrap:anywhere}.hotspot>span:not(.hotspot-number){min-width:0}.hotspot strong,.hotspot small{display:block}.hotspot strong{font-size:13px;font-weight:600}.hotspot small{font-size:10px;color:#6c7a70;line-height:1.6;margin-top:3px}.hotspot-number{flex-shrink:0;margin-left:auto;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#f6f3e7;color:#626e52;border:1px solid #bac6ae;font-size:11px;transition:all .3s}.hotspot:hover{border-color:#82986b;background:#eef4e2}.hotspot.is-active{background:#f2f7e7;border-color:#65824b;box-shadow:0 0 0 3px #90a76a28}.hotspot.is-active .hotspot-number{background:#37582e;color:white;border-color:#37582e;transform:scale(1.08)}.sender-hotspot{margin:0 0 21px;padding:10px 8px}.sender-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e8edf2;color:#45677d;font-size:17px;flex-shrink:0}.url-hotspot{background:#f2f5f8;border:1px solid #d7e0e4;font-family:monospace;font-size:12px;line-height:1.8;margin-bottom:16px}.hotspot mark{background:#ebdcc0;color:#713e2b;padding:2px 0;border-radius:2px;transition:background .5s}.url-hotspot.is-active mark,.browser-address.is-active mark{background:#edd3a4;color:#552f20;box-shadow:0 2px 0 #b7893a}.fake-action{display:inline-block;background:#496b89;color:#fff;border-radius:4px;padding:10px 19px;font-size:11px;margin:4px 0 18px;pointer-events:none}.warning-hotspot{background:#faf3e8;color:#795f3d;font-size:11px}.scene-verdict{display:flex;align-items:center;gap:12px;background:#d2dec2;border:1px solid #c1d0ae;border-radius:8px;padding:14px 17px;font-size:10px;color:#4a6240;transition:background .4s,transform .4s}.scene-verdict>span:first-child{font-size:24px;line-height:1}.scene-verdict strong{display:block;font-size:12px;color:#2e4c32;margin-bottom:4px}.visual-lesson[data-stage="3"] .scene-verdict{background:#c6d8ae;transform:translateY(-3px)}.device-pair{display:grid;grid-template-columns:minmax(0,1fr) 175px;gap:18px;align-items:center}.browser-address{border-radius:0;border-bottom:1px solid #d7e0d0;background:#f8faf7;font-size:9px;font-family:monospace;padding:12px}.login-card{margin:25px 21px;padding:18px 0;min-height:280px}.microsoft-word{display:flex;gap:7px;align-items:center;font-size:17px;color:#606a71;margin-bottom:22px}.ms-squares{width:20px;height:20px;display:grid;grid-template-columns:1fr 1fr;gap:2px;flex-shrink:0}.ms-squares i:nth-child(1){background:#ed6a42}.ms-squares i:nth-child(2){background:#81ac3c}.ms-squares i:nth-child(3){background:#519fc4}.ms-squares i:nth-child(4){background:#efbb3b}.login-card h3{font-size:24px;letter-spacing:-.02em}.login-card p:not(.microsoft-word){font-size:10px;color:#6d777c}.inert-input{border-bottom:1px solid #8296a5;padding:12px 0;font-size:10px;color:#6b7880;margin:10px 0;line-height:1.5}.fake-next{background:#2870a7;color:white;padding:7px 30px;width:max-content;margin:20px 0 20px auto;font-size:11px}.login-card>small{display:block;font-size:9px;color:#7b837d}.phone-shell{border:5px solid #293e3b;border-radius:27px;padding:13px 13px 21px;background:#fafbf8;box-shadow:5px 10px 0 #becbb150;position:relative;min-width:0}.phone-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:58px;height:12px;border-radius:0 0 9px 9px;background:#293e3b}.phone-time{display:flex;justify-content:space-between;font-size:8px;margin:0 0 26px;color:#526458}.phone-app{font-size:11px;text-align:center;margin-bottom:17px}.mfa-request{flex-direction:column;text-align:center;gap:6px;padding:13px 7px;min-height:160px}.mfa-request .hotspot-number{margin:5px auto 0}.mfa-request strong{font-size:14px}.mfa-request small{font-size:9px}.phone-icon{font-size:27px;display:grid;place-items:center;width:41px;height:41px;border-radius:50%;background:#d8e5ef;color:#347cab;margin-bottom:3px}.inert-approve{border:1px solid #b8c5cf;background:#e1e9ef;text-align:center;padding:8px;font-size:10px;margin:15px 0 8px;color:#6d7a83;border-radius:4px}.deny-action{padding:8px 6px;font-size:10px;gap:5px;background:#eaf0e3}.deny-action .hotspot-number{width:21px;height:21px;font-size:9px}.comparison-heading{display:grid;grid-template-columns:1fr 1fr;gap:18px;color:#627751;font-size:8px;letter-spacing:.15em;font-weight:700;margin-bottom:-7px}.invoice-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}.invoice-paper{background:#fffefa;border:1px solid #d3dccb;padding:22px 18px;box-shadow:4px 7px 0 #d2d9c9;position:relative;min-width:0}.invoice-paper h3{font-family:Georgia,serif;font-size:22px;letter-spacing:-.04em;color:#344e45;margin:25px 0}.invoice-paper .screen-label{font-size:7px}.invoice-line{display:flex;justify-content:space-between;gap:10px;font-size:8px;border-bottom:1px solid #e6e9e0;padding:9px 0}.invoice-line strong{text-align:right;font-size:8px}.invoice-total{display:flex;flex-direction:column;gap:5px;margin:16px 0 25px}.invoice-total span,.bank-label{font-size:8px;color:#6f7c68;letter-spacing:.08em}.invoice-total strong{font-size:24px;letter-spacing:-.04em}.bank-label{margin:21px 0 7px}.bank-number,.changed-bank>strong{font-family:monospace;font-size:22px;letter-spacing:1px}.bank-number{padding:9px 0;color:#687565}.trusted-number{margin-top:30px;padding:10px 6px;background:#edf2e4;gap:5px}.trusted-number strong{font-size:11px}.trusted-number small{font-size:8px}.trusted-number .hotspot-number{width:23px;height:23px}.changed-bank{background:#f8ecdf;border-color:#e0c2a6;padding:10px;gap:5px}.matching-invoice{padding:10px 5px;margin:20px 0 28px}.matching-invoice strong{font-size:24px;letter-spacing:-.04em}.matching-invoice small{font-size:9px}.invoice-note{font-family:Georgia,serif;font-size:12px;line-height:1.6;font-style:italic;color:#806244;margin:24px 0 0}.revised-stamp{position:absolute;right:14px;top:49px;border:1px solid #bf7949;padding:2px 5px;font-size:7px;color:#a46136;transform:rotate(8deg)}.share-banner{display:flex;align-items:center;gap:12px;padding:15px 19px;background:#f2f5f8;border-bottom:1px solid #dde5e9}.file-icon{display:grid;place-items:center;min-width:35px;height:39px;background:#567b96;color:white;font-size:25px;border-radius:4px}.document-paper{padding:28px 25px;margin:24px 40px;background:#fff;border:1px solid #dde2d9;box-shadow:0 3px 12px #3443350a}.pdf-label{display:inline-block;padding:9px 7px;background:#f5e8df;color:#ac5e47;border-radius:3px;font-size:12px;margin-bottom:17px}.document-paper h3{font-size:19px}.document-lines{display:grid;gap:8px;margin:25px 0}.document-lines i{height:4px;background:#e8ece4;width:100%}.document-lines i:last-child{width:65%}.install-instructions{background:#faf2e5;padding:13px;gap:9px;border:1px solid #e1ccaa}.alert-symbol{border:1px solid #9d7c42;color:#9d7c42;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:19px}.install-instructions small{font-size:10px}.install-instructions strong{font-size:12px}.document-paper>.fake-action{margin:18px 0 0;background:#8f6f46}.mobile-examples{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px;align-items:center;max-width:570px;margin:auto;width:100%}.text-phone{min-height:365px;padding:17px 16px}.sms-sender{font-size:11px;padding:8px 0 20px;border-bottom:1px solid #dfe5da}.sms-bubble{margin-top:20px;background:#e3e8e0;border-radius:13px;padding:14px 12px;align-items:flex-start;font-size:12px;flex-wrap:wrap}.sms-bubble small{color:#3d6a87;overflow-wrap:anywhere;margin-top:12px}.sms-compose{display:flex;justify-content:space-between;border:1px solid #d0d8c9;border-radius:13px;margin-top:35px;padding:6px 9px;font-size:9px;color:#8d9886}.sms-compose span{background:#6e865c;color:white;border-radius:50%;width:16px;text-align:center}.mobile-side{display:flex;flex-direction:column;gap:25px;min-width:0}.qr-poster{flex-direction:column;align-items:center;text-align:center;padding:20px 13px;background:#fffef7;border:1px solid #c7d0bb;box-shadow:5px 6px 0 #d4dcc8;transform:rotate(2deg)}.qr-poster .hotspot-number{position:absolute;right:8px;top:8px}.qr-poster strong{font-size:18px;line-height:1.4;font-family:Georgia,serif}.qr-poster .screen-label{font-size:7px;padding-right:15px}.qr-poster small{font-size:8px}.qr-art{position:relative;display:block;width:108px;height:108px;background:repeating-linear-gradient(90deg,transparent 0 12px,#cbd2c0 12px 17px,transparent 17px 24px),repeating-linear-gradient(0deg,white 0 13px,#cbd2c0 13px 18px,white 18px 24px);border:9px solid white;box-shadow:0 0 0 1px #d6decb;margin:7px auto}.qr-art i{width:24px;height:24px;border:5px solid #344b3b;position:absolute;top:1px;left:1px;background:white}.qr-art i:nth-child(2){left:auto;right:1px}.qr-art i:nth-child(3){top:auto;bottom:1px}.qr-art>span{position:absolute;inset:35px -6px auto;padding:1px;background:#fff;color:#5b7047;font-weight:700;font-size:12px;letter-spacing:2px;transform:rotate(-12deg)}.call-card{background:#1d3632;color:#faf8ee;padding:17px 13px;box-shadow:3px 5px 0 #c8d3bb;gap:9px}.call-card small{color:#c4d2ba;font-size:8px}.call-card strong{font-size:14px}.call-card .hotspot-number{border-color:#91a57c;background:#3a5843;color:#f0f3e5}.call-card.is-active{background:#274939;color:#fff}.call-icon{font-size:26px}.field-illustration,.verification-art{position:relative;overflow:hidden;border-radius:8px}.field-illustration img{width:100%;height:270px;object-fit:cover;display:block;object-position:50% 46%}.illustration-label{position:absolute;top:16px;left:16px;font-size:8px;letter-spacing:.13em;background:#faf8eede;color:#40563c;padding:8px 11px;border-radius:4px}.field-message{background:#fffefa;padding:17px 18px;border-radius:8px;border:1px solid #d2d9c9;margin-top:-56px;margin-left:25px;margin-right:25px;z-index:1;box-shadow:0 10px 20px #203b2a0c}.field-message>.screen-label{font-size:7px}.field-message .hotspot{padding:10px}.field-demand{background:#faf1e3;font-size:11px;margin-top:7px}.verification-art img{width:100%;height:215px;object-fit:cover;object-position:50% 50%;display:block}.channel-map{padding-top:3px}.source-node{background:#fffefa;max-width:340px;margin:auto;border:1px solid #ccd7c1}.source-node>span:first-child{font-size:27px}.channel-fork{display:flex;justify-content:space-around;font-size:28px;color:#9dad8d;height:38px;line-height:1.3}.channel-options{display:grid;grid-template-columns:1fr 1fr;gap:17px}.channel-node{padding:14px 10px;gap:8px}.channel-node strong{font-size:11px}.channel-node small{font-size:9px}.same-source{background:#f4e8d9;border-color:#dfc8a8}.trusted-source{background:#dfeacd;border-color:#bdcea6}.route-symbol{font-size:25px}.response-story{padding:5px 12px}.scene-kicker{font-size:8px;font-weight:700;letter-spacing:.17em;color:#75805d;margin-bottom:15px}.response-story h3{font-size:36px;line-height:1.15;margin:0 0 30px}.response-node{background:#fffefa;border:1px solid #d0dac7;padding:17px;gap:17px}.response-node strong{font-size:16px}.response-node small{font-size:7px;letter-spacing:.1em;margin-bottom:4px}.response-node>span>span{font-size:11px;color:#607157;display:block;margin-top:5px}.response-drawing{width:53px;height:53px;flex-shrink:0;display:grid;place-items:center;border-radius:11px;background:#e8eddc;color:#5c774b;font-size:29px}.response-node .response-drawing .tiny-window{display:block;margin:0;width:32px;height:26px;border:2px solid #7f9467;border-top:7px solid #7f9467;border-radius:3px;text-align:right;padding-right:4px;color:#547243;font-size:14px;line-height:1}.response-connector{height:20px;border-left:2px dashed #b1c19c;margin-left:43px}.lesson-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.88fr);gap:36px;align-items:start}.visual-practice{position:static;max-width:none}.visual-practice .practice-title h2{font-size:29px}.visual-takeaway{padding:27px;background:#1e3931;color:#f3efdf;border-radius:10px;margin-bottom:28px}.visual-takeaway .eyebrow{color:#c1cda6;font-size:8px;margin-bottom:17px}.visual-takeaway p{font-size:26px;line-height:1.35;letter-spacing:-.04em}.essentials h2{font-size:23px;margin-bottom:17px}.essentials ul{padding:0;list-style:none;margin:0 0 28px}.essentials li{font-size:14px;line-height:1.75;color:#596e5b;padding:13px 0 13px 26px;border-bottom:1px solid #d9dfce;position:relative}.essentials li:before{content:'✓';position:absolute;left:0;color:#688650}.lesson-notes{border:1px solid #cdd6c0;border-radius:8px;padding:18px 21px;background:#f8f8f1}.lesson-notes>summary{font-size:13px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;gap:12px;list-style:none}.lesson-notes>summary::-webkit-details-marker{display:none}.lesson-notes>summary span{font-size:18px;font-weight:400;line-height:1}.lesson-notes[open]>summary span{transform:rotate(45deg)}.lesson-notes .reading{margin-top:26px}.lesson-notes .reading h2{font-size:21px;margin-top:24px}.lesson-notes .reading p{font-size:14px}.lesson-companion>.reflection{margin:23px 0;font-size:13px;padding:15px 0}.response-selector{margin:0 0 35px}.response-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:20px 0}.response-choice-grid details{border:1px solid #cfd9c4;border-radius:8px;background:#fffefa;padding:19px}.response-choice-grid summary{font-size:13px;font-weight:600;list-style:none;cursor:pointer;display:flex;gap:12px;align-items:center;line-height:1.5}.response-choice-grid summary>span{display:grid;place-items:center;min-width:33px;height:33px;border-radius:50%;background:#e8eddd;color:#6d8354;font-size:20px}.response-choice-grid details p{font-size:13px;color:#566a54;margin-top:19px;line-height:1.8}.response-choice-grid details[open]{border-color:#82976a;background:#f2f6e8}.visual-course-banner{display:grid;grid-template-columns:1fr 1fr;background:#e4e9da;border:1px solid #d7dfcb;border-radius:12px;overflow:hidden;margin-bottom:26px}.visual-course-banner>div{padding:28px}.visual-course-banner .eyebrow{font-size:8px;margin-bottom:13px}.visual-course-banner h2{font-size:29px;line-height:1.2}.visual-course-banner p:last-child{font-size:13px;color:#5e7158}.visual-course-banner img{height:100%;min-height:225px;max-height:310px;width:100%;object-fit:cover;display:block}.visual-card-art{height:130px;margin:-25px -25px 22px;background:#e2e8d6;position:relative;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid #d2ddc6}.visual-card-art img{width:100%;height:100%;object-fit:cover;object-position:50% 43%}.mini-screen{width:62%;height:88px;background:#fffefa;border:1px solid #bbcbae;border-radius:5px;box-shadow:6px 7px 0 #bccbaa;transform:rotate(-3deg);padding:18px 15px 10px}.mini-screen:before{content:'';position:absolute;top:0;left:0;right:0;height:11px;background:#cdd9bf;border-radius:4px 4px 0 0}.mini-screen strong{display:block;font-size:12px;color:#38583d;letter-spacing:-.03em}.mini-screen>span{display:block;height:4px;background:#d6dfcc;width:80%;margin-top:7px}.mini-screen>span:last-child{width:50%;background:#cda866}.mini-badge{position:absolute;right:18%;bottom:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#31563d;color:#fff7dc;border:3px solid #f5f5e7;font-size:17px}.visual-card-art.art-2{background:#dfe8e9}.art-2 .mini-screen{transform:rotate(3deg);width:49%;margin-right:22px}.art-2 .mini-badge{border-radius:8px;width:39px;height:60px;bottom:22px;background:#4e6d79;font-size:24px}.visual-card-art.art-3{background:#eee4d2}.art-3 .mini-screen{transform:rotate(-4deg);width:47%;height:100px}.art-3 .mini-badge{border-radius:5px;background:#9b7742;font-size:13px;width:57px;right:19%}.visual-card-art.art-4{background:#e5e4d9}.art-4 .mini-screen{width:42%;height:99px;transform:rotate(4deg)}.art-4 .mini-badge{background:#997255}.visual-card-art.art-5{background:#dce4d4}.art-5 .mini-screen{width:35%;height:110px;transform:rotate(-5deg);border:4px solid #496342;border-radius:12px}.art-5 .mini-badge{background:#405a4b;right:26%;bottom:19px}.visual-card-art.art-8{background:#e4e8d4}.art-8 .mini-screen{width:62%;transform:rotate(0);background:#1e3c31}.art-8 .mini-screen strong{color:#f0efda}.art-8 .mini-screen>span{background:#759167}.art-8 .mini-screen:before{background:#557648}.art-8 .mini-badge{background:#9aa968;color:#1e3c31}.is-playing .hotspot.is-active{animation:clue-focus .65s ease-out}.is-playing .hotspot.is-active .phone-icon,.is-playing .hotspot.is-active .call-icon{animation:gentle-ring 1s ease-in-out 2}.is-playing .response-node.is-active .response-drawing{animation:decision-enter .55s ease-out}.is-playing .story-flow>.is-current:after{content:'';position:absolute;left:0;right:0;top:-2px;height:2px;background:#28472e;transform-origin:left;animation:step-timer 8s linear forwards}.is-playing[data-stage="2"] .same-source .route-symbol{animation:loop-route 1.2s ease-in-out}.is-playing[data-stage="3"] .trusted-source .route-symbol{animation:decision-enter .7s ease-out}.is-playing[data-stage="2"] .changed-bank strong{animation:decision-enter .6s ease-out}.is-playing[data-stage="1"] .field-message{animation:decision-enter .6s ease-out}@keyframes clue-focus{from{box-shadow:0 0 0 8px #90a76a00}50%{box-shadow:0 0 0 6px #90a76a35}to{box-shadow:0 0 0 3px #90a76a28}}@keyframes gentle-ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}@keyframes decision-enter{from{opacity:.55;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes step-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes loop-route{from{transform:rotate(-120deg)}to{transform:rotate(0)}}
@media(min-width:1600px){.visual-workbench{grid-template-columns:minmax(0,1fr) 310px}.scene-canvas{padding:35px}.screen-content{padding:27px 32px}.device-pair{grid-template-columns:minmax(0,1fr) 195px}.visual-card-art{height:155px}}
@media(max-width:1100px){.visual-workbench{grid-template-columns:1fr}.scene-explainer{border-left:0;border-top:1px solid #dce2d5;display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px;padding:21px 25px}.scene-explainer>.mini-label{grid-column:1/-1}.scene-cue{padding:13px 0}.scene-cue p{margin-left:0;font-size:12px}.scene-cue summary{font-size:12px;gap:8px}.scene-cue .cue-number{width:23px;height:23px;font-size:10px}.decision-jump{grid-column:1/-1;margin-top:13px}.scene-canvas{min-height:420px;padding:26px 35px}.lesson-bottom{grid-template-columns:1fr;gap:24px}.visual-practice{width:100%}.screen-content{padding:23px}.device-pair{grid-template-columns:minmax(0,1fr) 190px}.scene-controls{padding:15px 24px}.visual-course-banner>div{padding:23px}.visual-course-banner h2{font-size:25px}}
@media(max-width:760px){.visual-titlebar{padding:23px;gap:15px}.visual-format{display:none}.visual-titlebar h2{font-size:25px}.scene-canvas{padding:22px}.device-pair{grid-template-columns:minmax(0,1fr) 158px;gap:15px}.login-card{margin:17px;padding:13px 0}.scene-explainer{display:block;padding:22px}.scene-cue{padding:15px 0}.scene-cue summary{font-size:14px}.scene-cue p{margin-left:31px;font-size:13px}.scene-controls{align-items:flex-start;flex-direction:column;gap:12px}.playback-status{text-align:left}.invoice-paper{padding:20px 13px}.invoice-paper h3{font-size:21px}.visual-course-banner{grid-template-columns:1fr}.visual-course-banner img{height:210px;min-height:0;object-position:50% 45%}.response-choice-grid{grid-template-columns:1fr}.visual-card-art{margin:-21px -21px 20px}.mobile-examples{gap:17px}.channel-options{gap:10px}.channel-node{padding:12px 9px;gap:6px}.channel-node .route-symbol{display:none}}
@media(max-width:480px){.visual-heading h1{font-size:35px}.visual-titlebar{padding:21px 18px}.visual-titlebar h2{font-size:23px}.visual-titlebar p:last-child{font-size:12px}.scene-canvas{padding:18px 13px;min-height:0;gap:15px}.window-bar{padding:10px;font-size:8px;gap:8px}.window-bar>span:last-child:not(:nth-child(2)){display:none}.screen-content{padding:18px 13px}.screen-content h3{font-size:19px}.screen-content p{font-size:11px}.sender-hotspot{padding:10px 5px;gap:8px}.sender-avatar{display:none}.sender-hotspot strong{font-size:11px}.hotspot small{font-size:9px}.hotspot-number{width:24px;height:24px;font-size:10px}.url-hotspot{font-size:10px;padding:10px;gap:7px}.warning-hotspot{font-size:10px;padding:10px}.scene-explainer{padding:18px}.scene-cue p{margin-left:0;font-size:13px}.scene-disclaimer{padding:12px 18px;font-size:8px}.scene-controls{padding:15px 18px}.play-scene{min-width:0;font-size:10px;padding:10px}.step-scene{width:36px}.player-buttons{gap:5px;flex-wrap:wrap}.story-flow{padding:1px 13px 18px;gap:6px}.story-flow>span{font-size:8px;display:block}.story-flow b{display:block;margin-bottom:5px}.device-pair{grid-template-columns:1fr;gap:20px}.login-card{margin:20px;min-height:0}.login-card>small{font-size:10px}.browser-address{font-size:10px}.mfa-phone{width:190px;margin:0 auto;padding:18px 14px 23px}.phone-app{font-size:12px}.mfa-request{min-height:140px}.phone-time{margin-bottom:20px}.scene-verdict{padding:13px 12px;font-size:10px;gap:8px}.scene-verdict strong{font-size:11px}.scene-verdict>span:first-child{font-size:20px}.scene-verdict .hotspot-number{width:23px;height:23px;flex-shrink:0}.invoice-pair{grid-template-columns:1fr;gap:24px}.comparison-heading{display:none}.invoice-paper{padding:23px}.invoice-paper h3{font-size:24px;margin-top:20px}.invoice-paper .screen-label{font-size:8px}.invoice-line,.invoice-line strong{font-size:10px}.invoice-total{margin:15px 0}.invoice-total strong{font-size:25px}.bank-label{font-size:8px}.bank-number,.changed-bank>strong{font-size:26px}.trusted-number{margin-top:20px}.trusted-number small{font-size:9px}.trusted-number strong{font-size:13px}.matching-invoice{margin:12px 0 18px}.matching-invoice strong{font-size:25px}.revised-stamp{right:20px;top:48px}.document-paper{margin:17px 14px;padding:18px 12px}.document-paper h3{font-size:18px}.share-banner{padding:10px 8px;gap:5px}.share-banner .file-icon{display:none}.share-banner .hotspot{padding:9px;gap:8px}.share-banner strong{font-size:11px}.install-instructions{padding:10px;gap:7px}.install-instructions .alert-symbol{display:none}.install-instructions strong{font-size:11px}.mobile-examples{grid-template-columns:1fr;gap:25px;max-width:240px}.text-phone{max-width:218px;margin:auto;min-height:350px}.mobile-side{gap:20px}.qr-poster{width:100%;padding:25px}.qr-poster small{font-size:9px}.qr-poster strong{font-size:20px}.qr-art{width:116px;height:116px}.call-card{padding:20px 14px}.call-card small{font-size:9px}.field-illustration img{height:215px;object-position:62% 50%}.illustration-label{font-size:6px;padding:6px 8px;top:9px;left:9px}.field-message{margin:-24px 7px 0;padding:13px 10px}.field-message .hotspot{padding:10px 5px;font-size:10px;gap:8px}.field-message strong{font-size:12px}.verification-art img{height:185px}.channel-options{grid-template-columns:1fr;gap:13px}.channel-fork{height:30px;font-size:23px}.channel-node{padding:15px 10px}.channel-node strong{font-size:12px}.channel-node small{font-size:10px}.channel-node .route-symbol{display:block}.response-story{padding:10px 0}.response-story h3{font-size:29px}.response-node{padding:13px 10px;gap:9px}.response-node strong{font-size:13px}.response-node small{font-size:7px}.response-node>span>span{font-size:10px}.response-drawing{width:36px;height:42px;font-size:24px;border-radius:7px}.response-node .response-drawing .tiny-window{width:25px;height:24px}.response-connector{margin-left:30px}.visual-takeaway{padding:24px}.visual-takeaway p{font-size:25px}.essentials h2{font-size:22px}.essentials li{font-size:13px}.visual-practice .practice-title h2{font-size:26px}.visual-course-banner h2{font-size:28px}.visual-course-banner img{height:180px}.visual-card-art{height:145px}}
@media(prefers-reduced-motion:reduce){.visual-lesson *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.visual-lesson[data-stage="3"] .scene-verdict{transform:none}.hotspot.is-active .hotspot-number{transform:none}}
/* Keep instructional screen details readable; only decorative chrome uses microtype. */
.screen-content p{font-size:14px}.sender-hotspot strong{font-size:14px}.sender-hotspot small{font-size:12px}.browser-address{font-size:12px}.login-card p:not(.microsoft-word),.inert-input{font-size:12px}.login-card>small{font-size:11px}.phone-app{font-size:13px}.mfa-request small{font-size:11px}.inert-approve,.deny-action{font-size:11px}.warning-hotspot{font-size:12px}.scene-verdict{font-size:12px}.scene-verdict strong{font-size:13px}.invoice-line,.invoice-line strong{font-size:11px}.matching-invoice small,.trusted-number small{font-size:11px}.trusted-number strong{font-size:13px}.invoice-note{font-size:14px}.install-instructions small{font-size:12px}.share-banner small{font-size:11px}.sms-bubble{font-size:14px}.sms-bubble small{font-size:12px}.call-card small{font-size:11px}.field-message .hotspot{font-size:13px}.field-message small{font-size:11px}.channel-node strong{font-size:13px}.channel-node small{font-size:11px}.response-node>span>span{font-size:12px}
@media(max-width:480px){.screen-content p{font-size:12px}.sender-hotspot strong{font-size:12px}.sender-hotspot small{font-size:10px}.browser-address{font-size:11px}.warning-hotspot{font-size:11px}.scene-verdict{font-size:11px}.scene-verdict strong{font-size:12px}.field-message .hotspot{font-size:12px}.channel-node strong{font-size:12px}.channel-node small{font-size:10px}.response-node>span>span{font-size:11px}}
/* Amber identifies a clue under inspection; green marks the verified response. */
.hotspot.is-active:not([data-reveal="3"]){background:#fbf4e3;border-color:#ae8544;box-shadow:0 0 0 3px #c6a56224}.hotspot.is-active:not([data-reveal="3"]) .hotspot-number{background:#89652d;border-color:#89652d;color:#fffefa}.scene-cue[open]:not([data-cue="3"]) .cue-number{background:#89652d;border-color:#89652d}.mfa-outcome{position:relative;margin:15px 0 8px}.mfa-outcome .inert-approve{margin:0;transition:opacity .3s}.request-denied{position:absolute;inset:0;display:grid;place-items:center;background:#dceacb;border:1px solid #97b778;border-radius:4px;color:#325d2b;font-size:11px;font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}.visual-lesson[data-stage="3"] .request-denied{opacity:1;transform:translateY(0)}.visual-lesson[data-stage="3"] .mfa-outcome .inert-approve{opacity:0}
@media(prefers-reduced-motion:reduce){.request-denied{transform:none}}
/* Keep faces and the act of verification visible in landscape crops. */
.field-illustration img{height:320px;object-position:50% 10%}.verification-art img{height:280px;object-position:50% 5%}.visual-card-art img{object-position:50% 12%}.visual-course-banner img{object-position:50% 12%}
@media(max-width:480px){.field-illustration img{height:215px;object-position:62% 10%}.verification-art img{height:185px;object-position:50% 5%}}
.lesson-card{overflow:hidden}