/* Security is an architectural story, not a decorative icon. */
.sec-mobile{display:none}
.sec-board:not(.is-playing) .sec-mobile *{animation-play-state:paused!important}
.sales-page #security.sec-system{background:#fff;padding:88px 0}
.sec-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:end;margin-bottom:40px}
.sec-heading h2{font-size:clamp(32px,3.6vw,52px);font-weight:400;letter-spacing:-.025em;line-height:1.12;margin:0}
.sec-heading p{font-size:16px;line-height:1.65;color:#777;margin:0;max-width:460px}
.sec-board{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);border:1px solid #e4e0d9;border-radius:10px;overflow:hidden;background:#fff}
.sec-narrative{display:flex;flex-direction:column;padding:32px 28px;border-right:1px solid #eeeae4;min-width:0}
.sec-overline{font-size:9px;letter-spacing:.08em;color:#999;margin-bottom:30px}
.sec-narrative article[hidden]{display:none}.sec-narrative article{animation:sec-copy-in .55s ease both}
.sec-narrative h3{font-size:26px;line-height:1.18;font-weight:400;letter-spacing:-.02em;margin:0 0 18px;color:#171717}
.sec-narrative article p{font-size:13px;line-height:1.65;color:#777;min-height:87px;margin:0 0 23px}
.sec-narrative article>span{font-size:10px;line-height:1.5;color:#aaa}
.sec-pause{appearance:none;border:0;border-top:1px solid #eeeae4;padding:16px 0 0;margin-top:auto;display:flex;align-items:center;justify-content:space-between;background:none;text-align:left;font:inherit;font-size:10px;color:#999;cursor:pointer;min-height:36px}
.sec-visual{position:relative;min-width:0;aspect-ratio:640/350;align-self:center}
.sec-canvas{position:absolute;inset:0 auto auto 0;width:640px;height:350px;transform:scale(var(--sec-scale,1));transform-origin:top left;font-family:inherit}
.sec-source{position:absolute;left:24px;width:126px;height:48px;display:flex;align-items:center;gap:9px;border:1px solid #e5e0d8;border-radius:5px;background:#fff;padding:10px 9px;z-index:2}
.sec-source-client{top:69px}.sec-source-editor{top:147px}.sec-source-risk{top:225px}
.sec-source-icon{font-size:16px;color:#8e877c;font-weight:400}.sec-source strong{display:block;font-weight:400;font-size:10px;color:#49453f}.sec-source small{display:block;font-size:7px;color:#aaa;margin-top:3px}.sec-source-status{margin-left:auto;font-size:9px;opacity:0;font-style:normal;color:#b89070;animation:sec-ok 6s infinite}
.sec-source-risk{border-color:#ead7ca}.sec-source-risk .sec-source-icon,.sec-source-risk .sec-source-status{color:#ed825d}
.sec-boundary{position:absolute;left:239px;top:46px;width:265px;height:237px;border:1px solid #e4c7b4;border-radius:10px;background:#fdfbf800;transition:border-color .8s,background .8s}
.sec-boundary>span{position:absolute;top:-7px;left:16px;background:#fff;padding:0 7px;font-size:7px;letter-spacing:.07em;color:#b89a85}.sec-boundary-light{position:absolute;left:-2px;top:155px;width:3px;height:17px;background:#ed825d;border-radius:2px;opacity:0;animation:sec-light 6s infinite}
.sec-site{position:absolute;left:254px;top:64px;width:234px;height:199px;border:1px solid #d8d2c9;border-radius:5px;background:#fff;overflow:hidden;box-shadow:0 7px 18px #17171706}
.sec-site-top{height:28px;border-bottom:1px solid #eeeae4;padding:0 12px;display:flex;align-items:center;justify-content:space-between}.sec-site-top b{font-size:9px;font-weight:400}.sec-site-top span{font-size:7px;color:#a1a38f}
.sec-site-nav{display:flex;align-items:center;gap:9px;padding:12px}.sec-site-nav>i{height:6px;width:28px;background:#747069;border-radius:2px;margin-right:auto}.sec-site-nav span{width:20px;height:2px;background:#ded7cb}
.sec-site-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:center;padding:4px 12px 10px}.sec-site-hero i{display:block;height:5px;width:90%;background:#898278;margin-bottom:5px;border-radius:2px}.sec-site-hero i:nth-child(2){width:65%}.sec-site-hero span{display:block;height:2px;background:#ded7cb;width:75%;margin-top:8px}.sec-site-hero b{display:block;width:43px;height:10px;background:#edad8b;margin-top:12px;border-radius:2px}.sec-site-hero svg{width:48px;height:48px;fill:#f0af8c;justify-self:center}
.sec-site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 12px}.sec-site-cards i{height:28px;background:#f9f7f3;border-radius:2px;border-top:2px solid #ece5da}
.sec-site-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin-top:7px;border-top:1px solid #eeeae4;font-size:6px;color:#aaa}.sec-site-footer i{font-style:normal;color:#b89a85}
.sec-routes{position:absolute;inset:0;width:640px;height:350px;overflow:visible}.sec-route{fill:none;stroke:#e4ddd2;stroke-width:1}.sec-route-risk{stroke:#eed7c7}.sec-backup-route{stroke-dasharray:2 4;opacity:.5}
.sec-packet{fill:#b1a28d;offset-distance:0%;animation:sec-travel 6s infinite ease-in-out}.sec-packet-client{offset-path:path('M150 93H215Q232 93 232 110V130H278')}.sec-packet-editor{offset-path:path('M150 171H278');animation-delay:1.3s}.sec-packet-risk{fill:#ed825d;offset-path:path('M150 249H212Q232 249 232 232V212H247');animation:sec-reject 6s infinite ease-in-out;animation-delay:.5s}
.sec-blocked{fill:none;stroke:#ed825d;stroke-width:1.3;opacity:0;animation:sec-light 6s infinite;animation-delay:.5s}.sec-impact{fill:none;stroke:#edc8ae;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:sec-impact 6s infinite;animation-delay:.5s}
.sec-backup{position:absolute;top:122px;left:535px;width:80px;height:114px;opacity:.4;transition:opacity .8s,transform .8s}.sec-backup>span{font-size:8px;color:#9b9183;position:absolute;top:-20px;left:10px}.sec-snapshot{position:absolute;inset:0 9px 24px 0;border:1px solid #dbd3c7;border-radius:4px;background:#fff;padding:13px 10px}.sec-snapshot-back{transform:translate(6px,7px);background:#faf7f2}.sec-snapshot i{display:block;height:3px;background:#ddd5c9;margin:0 0 7px;width:80%}.sec-snapshot i:nth-child(2){width:60%}.sec-snapshot b{display:block;font-size:7px;font-weight:400;color:#9b9183;margin-top:14px}
.sec-packet-backup{opacity:0;offset-path:path('M545 171H475');animation:none;fill:#e9a77f}
.sec-restore{position:absolute;inset:28px 0 0;background:#ffffffed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;opacity:0;pointer-events:none;transition:opacity .6s;font-size:10px;color:#8f8375}.sec-restore i{width:128px;height:2px;background:#ecdfd0;position:relative}.sec-restore i:after{content:'';display:block;width:100%;height:100%;background:#e7a77f;transform-origin:left;animation:sec-restore 6s infinite}.sec-restore b{font-size:8px;font-weight:400;animation:sec-restore-ok 6s infinite}
.sec-event{position:absolute;left:24px;right:24px;bottom:23px;display:flex;align-items:center;gap:7px;border-top:1px solid #eee9e1;padding-top:14px;font-size:8px;color:#aaa}.sec-event>i{width:4px;height:4px;background:#ed825d;border-radius:50%}
.sec-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #e9e4dc}
.sec-controls button{position:relative;appearance:none;background:#fff;border:0;border-right:1px solid #eeeae4;padding:18px 17px;text-align:left;font:inherit;font-size:11px;color:#aaa;cursor:pointer;line-height:1.4}.sec-controls button:last-child{border-right:0}.sec-controls button>span{font-size:8px;color:#c5b5a5;margin-right:8px}.sec-controls button[aria-pressed=true]{color:#49453f;background:#fdfbf8}.sec-controls button>i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:#edad8b;transform:scaleX(0);transform-origin:left}.sec-controls button[aria-pressed=true]>i{transform:scaleX(var(--sec-progress,0))}
.sec-board[data-mode="1"] .sec-source-client{opacity:.4}.sec-board[data-mode="1"] .sec-source-risk small{color:#b89070}.sec-board[data-mode="1"] .sec-packet-client{opacity:0;animation:none}
.sec-board[data-mode="2"] .sec-boundary{border-color:#dbab87;background:#fff8f203}.sec-board[data-mode="2"] .sec-packet-risk{animation-duration:2.4s}.sec-board[data-mode="2"] .sec-impact,.sec-board[data-mode="2"] .sec-blocked,.sec-board[data-mode="2"] .sec-boundary-light{animation-duration:2.4s}
.sec-board[data-mode="3"] .sec-source,.sec-board[data-mode="3"] .sec-route:not(.sec-backup-route){opacity:.2}.sec-board[data-mode="3"] .sec-packet:not(.sec-packet-backup){animation:none;opacity:0}.sec-board[data-mode="3"] .sec-backup{opacity:1;transform:translateY(-4px)}.sec-board[data-mode="3"] .sec-packet-backup{animation:sec-travel 6s infinite}.sec-board[data-mode="3"] .sec-restore{opacity:1}.sec-board[data-mode="3"] .sec-impact,.sec-board[data-mode="3"] .sec-blocked{opacity:0;animation:none}
.sec-board:not(.is-playing) .sec-visual *{animation-play-state:paused!important}
@keyframes sec-copy-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes sec-travel{0%,10%{opacity:0;offset-distance:0%}20%{opacity:1;offset-distance:0%}65%{opacity:1;offset-distance:100%}75%,100%{opacity:0;offset-distance:100%}}
@keyframes sec-reject{0%,10%{opacity:0;offset-distance:0%}20%{opacity:1;offset-distance:0%}55%{opacity:1;offset-distance:100%}65%{opacity:.6;offset-distance:84%}80%,100%{opacity:0;offset-distance:65%}}
@keyframes sec-light{0%,47%{opacity:0}55%,65%{opacity:1}78%,100%{opacity:0}}
@keyframes sec-impact{0%,50%{opacity:0;scale:.4}58%{opacity:.7;scale:.8}72%,100%{opacity:0;scale:1.5}}
@keyframes sec-restore{0%,15%{transform:scaleX(0)}65%,100%{transform:scaleX(1)}}
@keyframes sec-restore-ok{0%,65%{opacity:0}75%,100%{opacity:1}}
@media(max-width:1100px){.sec-heading{gap:36px}.sec-narrative{padding:24px 20px}.sec-narrative h3{font-size:23px}.sec-overline{margin-bottom:20px}.sec-narrative article p{font-size:12px;min-height:95px}.sec-narrative article>span{font-size:9px}.sec-controls button{font-size:10px;padding:15px 12px}}
@media(max-width:760px){.sales-page #security.sec-system{padding:64px 0}.sec-heading{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.sec-heading h2{font-size:32px}.sec-heading p{font-size:15px}.sec-board{grid-template-columns:1fr}.sec-narrative{border-right:0;border-bottom:1px solid #eeeae4;padding:22px 20px}.sec-overline{margin-bottom:15px}.sec-narrative h3{font-size:25px;margin-bottom:14px}.sec-narrative article p{font-size:14px;min-height:90px;margin-bottom:15px}.sec-pause{margin-top:15px;padding-top:12px}.sec-controls{grid-template-columns:1fr 1fr}.sec-controls button{padding:15px 12px;font-size:10px;min-height:48px}.sec-controls button:nth-child(-n+2){border-bottom:1px solid #eeeae4}.sec-visual{aspect-ratio:640/385}.sec-canvas{top:8px}}
@media(prefers-reduced-motion:reduce){.sec-board *{animation:none!important;transition:none!important}.sec-packet,.sec-impact,.sec-blocked{opacity:0}.sec-restore i:after{transform:scaleX(1)}.sec-restore b{opacity:1}}
.sec-permissions{position:absolute;inset:28px 0 0;padding:15px 13px;background:#fffffffa;opacity:0;transform:translateY(5px);transition:opacity .6s,transform .6s;pointer-events:none}
.sec-permissions>span{font-size:7px;letter-spacing:.06em;color:#a99480}.sec-permissions>div{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee8df;padding:13px 0}.sec-permissions b{font-size:9px;font-weight:400;color:#827a70}.sec-permissions i{font-size:7px;font-style:normal;color:#aaa}.sec-permissions>div:first-of-type i{color:#be9273}
.sec-board[data-mode="1"] .sec-permissions{opacity:1;transform:none}
.sec-risk-extra{opacity:0;animation:none;fill:#ed825d;offset-path:path('M150 249H212Q232 249 232 232V212H247')}
.sec-board[data-mode="2"] .sec-risk-extra{animation:sec-reject 2.4s infinite ease-in-out}.sec-board[data-mode="2"] .sec-risk-extra-a{animation-delay:.8s}.sec-board[data-mode="2"] .sec-risk-extra-b{animation-delay:1.6s}
.sec-controls button:focus-visible,.sec-pause:focus-visible{outline:2px solid #b68e70;outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.sec-risk-extra{opacity:0!important;animation:none!important}}

/* Distinct stories: access matrix and a distributed attack stream. */
.sec-access{display:none;position:absolute;left:65px;top:42px;width:510px;border:1px solid #e5e0d8;border-radius:8px;background:#fff;overflow:hidden}
.sec-access-head{padding:18px 22px;border-bottom:1px solid #eeeae4}.sec-access-head span{display:block;font-size:7px;letter-spacing:.09em;color:#a99480;margin-bottom:7px}.sec-access-head b{font-size:17px;font-weight:400;color:#49453f}
.sec-access-grid{display:grid;grid-template-columns:1.55fr repeat(3,1fr);padding:8px 22px 0;align-items:center}.sec-access-grid>*{height:38px;display:flex;align-items:center;border-bottom:1px solid #eeeae4;font-style:normal;font-weight:400;font-size:10px;color:#8e877c}.sec-access-grid>span{height:26px;font-size:8px}.sec-access-grid i,.sec-access-grid>span:not(:first-child){justify-content:center}.sec-access-grid .allowed{color:#b58665;font-size:14px}.sec-access-grid .own{font-size:8px;color:#b58665}
.sec-access-grid i{animation:sec-permit 7.2s infinite both}.sec-access-grid i:nth-child(n+9){animation-delay:.35s}.sec-access-grid i:nth-child(n+13){animation-delay:.7s}
.sec-access-request{margin:13px 22px 0;padding:10px 12px;background:#faf7f3;border-radius:3px;display:flex;justify-content:space-between;font-size:9px;color:#928779}.sec-access-request b{font-weight:400;color:#c17e5d;animation:sec-denied 7.2s infinite}.sec-access-note{font-size:7px;color:#aaa;padding:12px 22px 16px}
.sec-board[data-mode="1"] .sec-canvas>:not(.sec-access):not(.sec-event){visibility:hidden}.sec-board[data-mode="1"] .sec-access{display:block}
.sec-attack-label{display:none;position:absolute;left:24px;top:220px;z-index:2;background:#fff;padding:0 0 8px;width:168px}.sec-attack-label strong{display:block;font-size:10px;font-weight:400;color:#c38260}.sec-attack-label span{display:block;font-size:7px;color:#b09a88;margin-top:4px}
.sec-attack-route{fill:none;stroke:#f1e1d5;stroke-width:.7;opacity:0}.sec-attack-packet{fill:#df8b63;opacity:0;animation:none}.sec-attack-hit{fill:none;stroke:#dd9b73;stroke-width:.8;opacity:0;transform-box:fill-box;transform-origin:center}
.sec-board[data-mode="2"] .sec-source-risk,.sec-board[data-mode="2"] .sec-route-risk,.sec-board[data-mode="2"] .sec-packet-risk,.sec-board[data-mode="2"] .sec-risk-extra,.sec-board[data-mode="2"] .sec-blocked,.sec-board[data-mode="2"] .sec-impact{display:none}
.sec-board[data-mode="2"] .sec-attack-label{display:block;top:207px}.sec-board[data-mode="2"] .sec-attack-route{opacity:1}.sec-board[data-mode="2"] .sec-attack-packet{animation:sec-attack 2.5s linear infinite}.sec-board[data-mode="2"] .sec-attack-hit{animation:sec-hit 1.7s ease-out infinite}
.sec-board[data-mode="2"] .sec-packet-client,.sec-board[data-mode="2"] .sec-packet-editor{animation-duration:2.8s;fill:#777268}.sec-board[data-mode="2"] .sec-source-client small,.sec-board[data-mode="2"] .sec-source-editor small{color:#8e877c}.sec-board[data-mode="2"] .sec-source-status{opacity:1;animation:none;color:#8b967b}
.sec-board[data-mode="2"] .sec-boundary-light{top:164px;height:57px;animation:sec-perimeter 1.7s ease-in-out infinite}
@keyframes sec-attack{0%{offset-distance:0%;opacity:0}8%{opacity:.65}77%{offset-distance:100%;opacity:.85}88%{offset-distance:91%;opacity:.35}100%{offset-distance:86%;opacity:0}}
@keyframes sec-hit{0%{opacity:0;scale:.4}20%{opacity:.6}100%{opacity:0;scale:1.8}}
@keyframes sec-perimeter{0%,100%{opacity:.25}50%{opacity:.85}}
@keyframes sec-permit{0%{opacity:0;transform:translateY(3px)}15%,100%{opacity:1;transform:none}}
@keyframes sec-denied{0%,25%{opacity:.3}40%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.sec-board[data-mode="2"] .sec-attack-packet{animation:none!important;offset-distance:85%;opacity:.5}.sec-board[data-mode="2"] .sec-attack-hit{animation:none!important}.sec-access-grid i{opacity:1;transform:none}}
.sec-access{top:28px}.sec-access-head{padding:12px 22px}.sec-access-grid>*{height:32px}.sec-access-grid>span{height:22px}.sec-access-request{margin-top:10px;padding:8px 12px}.sec-access-note{padding:10px 22px 12px}
.sec-board:not(.is-playing) .sec-access-grid i,.sec-board:not(.is-playing) .sec-access-request b{opacity:1;transform:none}
.sec-board:not(.is-playing) .sec-access-grid i,.sec-board:not(.is-playing) .sec-access-request b{animation:none!important;opacity:1}
/* Phones use readable objects rather than a scaled desktop workspace. */
@media(max-width:760px){
 .sec-visual{display:none}
 .sec-mobile{display:block;padding:24px 20px;background:#f5f4f2}
 .sec-mobile-scene{margin-bottom:26px}
 .sec-mobile-scene:last-child{margin-bottom:0}
 [data-sec-ready="true"] .sec-mobile-scene{display:none;margin:0}
 [data-sec-ready="true"][data-mode="0"] [data-sec-mobile="0"],
 [data-sec-ready="true"][data-mode="1"] [data-sec-mobile="1"],
 [data-sec-ready="true"][data-mode="2"] [data-sec-mobile="2"],
 [data-sec-ready="true"][data-mode="3"] [data-sec-mobile="3"]{display:block}
 .sec-m-card,.sec-m-rejected{display:flex;align-items:flex-start;gap:16px;padding:20px;background:#fff;border-radius:8px;color:#171717}
 .sec-m-card>.impact-icon,.sec-m-rejected>.impact-icon{flex:none;color:#7b3348}
 .sec-m-card>div,.sec-m-rejected>div{min-width:0}
 .sec-m-card strong,.sec-m-rejected strong{font-size:18px;font-weight:400;line-height:1.3;display:block}
 .sec-m-card p,.sec-m-rejected p,.sec-m-note{font-size:14px;line-height:1.6;color:#656565;margin:8px 0 0}
 .sec-m-dark{background:#32131d;color:#fff}
 .sec-m-dark p{color:#c4b8bd}
 .sec-m-dark>.impact-icon{color:#ff5a2b}
 .sec-m-link{height:28px;width:1px;background:#b8a7ae;margin:auto;position:relative}
 .sec-m-link i{position:absolute;top:0;left:-2px;width:5px;height:5px;border-radius:50%;background:#ff5a2b;animation:sec-mobile-transfer 2.4s ease-in-out infinite}
 .sec-m-link:nth-of-type(4) i{animation-delay:-1.2s}
 .sec-m-note{margin-top:18px}
 .sec-m-permissions{padding:8px 20px;background:white;border-radius:8px}
 .sec-m-permissions>div{padding:14px 0;display:flex;gap:18px;justify-content:space-between;align-items:center;border-bottom:1px solid #d6d6d6;font-size:14px;line-height:1.5}
 .sec-m-permissions>div:last-child{border:0}
 .sec-m-permissions strong{font-weight:400;white-space:nowrap;color:#7b3348}
 .sec-m-rejected{margin-top:20px;border:1px solid #b8a7ae;background:none}
 .sec-narrative article p{min-height:0;color:#656565}
 .sec-overline,.sec-narrative article>span,.sec-pause{color:#656565}
 .sec-controls button{font-size:12px;color:#656565}
 .sec-controls button>span{font-size:11px;color:#656565}
}
@keyframes sec-mobile-transfer{0%{transform:translateY(0);opacity:.3}40%{opacity:1}100%{transform:translateY(24px);opacity:.3}}
/* Editorial accents and clear native stage controls. */
.sec-system .sec-accent{color:#ff5a2b}
.sec-system .sec-event{border-top:0;padding-top:0;color:#656565}
.sec-system .sec-controls{gap:8px;padding:12px;background:#f5f5f5;border-top:1px solid #e4e4e4}
.sec-system .sec-controls button{border:1px solid #dedede;border-radius:7px;background:#fff;color:#494949;font-size:13px;min-height:52px;padding:14px 16px;transition:background .2s,color .2s,border-color .2s}
.sec-system .sec-controls button:last-child{border-right:1px solid #dedede}
.sec-system .sec-controls button>span{font-size:10px;color:#777}
.sec-system .sec-controls button:hover{background:#fff0e9;border-color:#ff5a2b;color:#171717}
.sec-system .sec-controls button[aria-pressed=true]{background:#ff5a2b;border-color:#ff5a2b;color:#171717}
.sec-system .sec-controls button[aria-pressed=true]>span{color:#171717}
.sec-system .sec-controls button>i{background:#171717;height:2px;bottom:0;left:8px;width:calc(100% - 16px)}
.sec-system .sec-controls button:focus-visible,.sec-system .sec-pause:focus-visible{outline:2px solid #ff5a2b;outline-offset:2px}
.sec-system .sec-access-request{background:#fff0e9;border-left:2px solid #ff5a2b;color:#9b4025}
.sec-system .sec-access-request b{color:#e54b20;animation:none;opacity:1}
.sec-system .sec-source-risk .sec-source-icon,.sec-system .sec-attack-label strong{color:#ff5a2b}
.sec-system .sec-m-rejected{background:#fff0e9;border-color:#ff5a2b}
.sec-system .sec-m-rejected strong{color:#e54b20}
@media(max-width:760px){.sec-system .sec-controls{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:8px}.sec-system .sec-controls button{font-size:12px;padding:12px;min-height:54px}.sec-system .sec-controls button>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.sec-system .sec-controls button{transition:none}}
@media(max-width:760px){
 .sec-system [data-sec-mobile="1"] .sec-m-permissions>div:nth-child(2){background:#fff0e9;border-radius:4px;padding:12px 8px;border-bottom:0;gap:12px}
 .sec-system [data-sec-mobile="1"] .sec-m-permissions>div:nth-child(2) strong{color:#e54b20}
}