/* The new interface previews extend the existing editorial layout. */
.showcase-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.interface-preview [hidden],.phone-showcase [hidden],.preview-dialog [hidden]{display:none!important}
.interface-preview{margin:0 0 44px;scroll-margin-top:115px;min-width:0}
.preview-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.preview-badge{display:inline-flex;align-items:center;gap:10px;color:#9fd6d1;font-size:12px;line-height:1.5;letter-spacing:.035em}
.preview-badge>span{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#79d8cb}
.preview-count{font-size:12px;color:#94b4bd;white-space:nowrap;font-variant-numeric:tabular-nums}
.preview-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:18px;border-bottom:1px solid #35545f}
.preview-tabs button{min-height:52px;border:0;border-bottom:2px solid transparent;background:none;color:#a8c1ca;text-align:left;padding:12px 16px 12px 0;font:inherit;font-size:15px;cursor:pointer}
.preview-tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}
.preview-tabs button:hover{color:#e1f6f3}
.preview-panel{border:1px solid #42636b;background:#112a34;box-shadow:0 28px 64px #0004;border-radius:12px;min-width:0;overflow:hidden}
.preview-windowbar{display:flex;align-items:center;gap:18px;min-height:52px;padding:14px 22px;border-bottom:1px solid #42636b;color:#a6bdc4;font-size:12px}
.preview-windowbar img{width:80px;height:auto;display:block}
.preview-windowbar>span:last-child{margin-left:auto;color:#7399a5;letter-spacing:4px}
.preview-media{aspect-ratio:1618/915;position:relative;overflow:hidden;background:#e8f0f2}
.preview-media>img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%;transform:scale(1);transition:transform .6s cubic-bezier(.2,.7,.2,1),transform-origin .6s cubic-bezier(.2,.7,.2,1)}
.preview-media[data-focus=flow]>img{transform:scale(2.15);transform-origin:64% 30%}
.preview-media[data-focus=history]>img{transform:scale(2.35);transform-origin:85% 62%}
.preview-load-error{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:30px;background:#e8f0f2;color:#244550;font-size:16px;text-align:center}
.preview-caption{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:28px 30px 24px}
.preview-category{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8dc3c1;margin:0 0 12px}
.preview-caption h3{font-size:clamp(22px,2.25vw,34px);line-height:1.2;font-weight:400;letter-spacing:-.025em;margin:0 0 12px}
.preview-caption p:not(.preview-category){font-size:15px;line-height:1.7;color:#b2c9d0;max-width:690px;margin:0}
.preview-expand{display:inline-flex;align-items:center;gap:22px;flex:0 0 auto;min-height:44px;color:var(--accent);font-size:13px;border-bottom:1px solid #6f9ca3;text-decoration:none;white-space:nowrap}
.preview-expand:hover{color:#e0fff9}
.incident-tour{display:flex;flex-wrap:wrap;gap:8px;padding:0 30px 27px}
.incident-tour button{min-height:44px;padding:9px 15px;border:1px solid #42636b;background:transparent;color:#b7cfd5;font:inherit;font-size:13px;cursor:pointer;border-radius:4px}
.incident-tour button[aria-pressed=true]{background:#25464d;color:#e0f9f5;border-color:#82bdb9}
.preview-disclaimer{font-size:12px;line-height:1.7;color:#9eb9c2;margin:17px 0 0;max-width:740px}
.current-product-title{font-size:22px;font-weight:400;letter-spacing:-.02em;margin:0 0 18px;color:#b8d5da}
.interface-preview button:focus-visible,.preview-expand:focus-visible,.phone-showcase button:focus-visible,.phone-showcase input:focus-visible,.preview-dialog button:focus-visible,.pwa-current summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* A six-sided CSS object: the interface is a separate layer on its front. */
.phone-showcase{--phone-width:270px;--phone-depth:24px;--phone-height:calc((var(--phone-width) - 16px) * 2.44618 + 16px);background:radial-gradient(ellipse at 50% 45%,#17607040,transparent 68%)}
.phone-stage{position:relative;display:flex;align-items:center;justify-content:center;perspective:1200px;min-height:calc(var(--phone-height) + 70px);isolation:isolate;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.phone-stage.is-dragging{cursor:grabbing}
.phone-solid{position:relative;width:var(--phone-width);height:var(--phone-height);transform-style:preserve-3d;transform:rotateX(0deg) rotateY(0deg);flex:none}
.phone-front,.phone-back{position:absolute;inset:0;border-radius:36px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #7c959e}
.phone-front{transform:translateZ(12px);padding:7px;background:linear-gradient(130deg,#80969e,#21333d 30%,#101c24 75%,#a3b7be);box-shadow:inset 0 0 0 2px #0a1821,0 12px 30px #0004}
.phone-display{width:100%;height:100%;border-radius:29px;overflow:hidden;position:relative;background:#e7f0f3}
.phone-display>img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.phone-reflection{position:absolute;inset:0;background:linear-gradient(118deg,#c2eafa18,transparent 35%,transparent 70%,#0000000c);pointer-events:none}
.phone-back{transform:translateZ(-12px) rotateY(180deg);background:linear-gradient(135deg,#34515e,#142d3b 55%,#456473);display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;color:#b3d6db;font-size:22px;letter-spacing:-.02em}
.phone-back>img{width:62px;height:62px;opacity:.7}
.phone-cameras{position:absolute;top:20px;left:19px;display:flex;flex-direction:column;gap:12px;padding:10px;border-radius:22px;background:#0e222e;border:1px solid #5d7782}
.phone-cameras i{display:block;width:26px;height:26px;border-radius:50%;border:4px solid #1a2f39;background:radial-gradient(circle at 40% 40%,#2c5d70,#03090e 50%);box-shadow:0 0 0 1px #75878d}
.phone-edge{position:absolute;backface-visibility:visible;background:linear-gradient(90deg,#1a2e38,#738b95 43%,#2b424e 75%,#a0b4bb)}
.phone-edge-left,.phone-edge-right{width:24px;height:calc(100% - 60px);top:30px;transform:rotateY(90deg)}
.phone-edge-left{left:-12px}.phone-edge-right{right:-12px}
.phone-edge-top,.phone-edge-bottom{height:24px;width:calc(100% - 60px);left:30px;transform:rotateX(90deg)}
.phone-edge-top{top:-12px}.phone-edge-bottom{bottom:-12px}
.phone-side-button{position:absolute;right:-13px;top:23%;width:25px;height:52px;border-radius:4px;background:#8297a2;transform:rotateY(90deg)}
.phone-floor{position:absolute;width:70%;height:35px;bottom:9px;border-radius:50%;background:radial-gradient(ellipse,#0006,transparent 70%);filter:blur(7px);pointer-events:none}
.phone-scenes{display:flex;justify-content:center;gap:4px;margin:12px auto 16px;padding:4px;width:fit-content;max-width:100%;border:1px solid #355862;border-radius:6px;background:#0b222c}
.phone-scenes button{min-height:44px;padding:10px 18px;background:transparent;border:0;border-radius:3px;color:#a7c6ce;font:inherit;font-size:14px;cursor:pointer}
.phone-scenes button[aria-pressed=true]{color:#e3f7f4;background:#254b53}
.phone-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;max-width:410px;margin:0 auto 12px}
.phone-controls button{min-height:44px;padding:9px 5px;border:0;background:transparent;color:#b5d3da;font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:5px}
.phone-controls label{display:flex;align-items:center;min-height:44px}
.phone-controls input{width:105px;min-height:44px;accent-color:var(--accent);cursor:ew-resize}
.phone-showcase figcaption{display:flex;flex-direction:column;gap:0;margin:8px 0 0;align-items:center;color:#b8d1d6}
.phone-showcase figcaption a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
.phone-instructions{font-size:11px;line-height:1.5;color:#91afb9;margin:4px 0 0}
.mobile-preview-note{border-left:2px solid #568c91;padding-left:17px;margin:0 0 24px}
.mobile-preview-note p{font-size:14px;line-height:1.65;color:#abc4cc;margin:9px 0 0;max-width:520px}
.pwa-current{border-top:1px solid #35525d;margin:12px 0}
.pwa-current summary{cursor:pointer;font-size:14px;color:#bcd6da;min-height:48px;padding:16px 0;line-height:1.5}
.pwa-current figure{max-width:240px;margin:14px auto;text-align:center}
.pwa-current img{display:block;width:100%;height:auto;border-radius:13px;border:1px solid #4e6c78}
.pwa-current figcaption{font-size:12px;line-height:1.6;color:#a7c1ca;margin-top:14px}
.pwa-current>a{display:inline-flex;align-items:center;color:var(--accent);font-size:13px;min-height:44px;text-decoration:underline;text-underline-offset:5px;margin:0 0 12px}
.contracts-preview{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(170px,.36fr);gap:25px;align-items:start;margin-top:58px;padding:33px 0 0;border-top:1px solid #385962;scroll-margin-top:115px}
.contracts-symbol{width:48px;height:58px;color:#8bc5c1}.contracts-symbol svg{width:100%;height:100%}
.contracts-preview h3{font-size:clamp(23px,2.6vw,36px);font-weight:400;letter-spacing:-.03em;line-height:1.2;margin:0 0 15px}
.contracts-preview p:not(.preview-category):not(.contracts-status){font-size:15px;line-height:1.7;color:#b1c9d0;margin:0 0 18px;max-width:650px}
.contracts-scope{font-size:12px;color:#9ebdc6;line-height:1.6;display:block}
.contracts-status{border-left:1px solid #547780;padding-left:21px;color:#9ac2c6;font-size:12px;line-height:1.8;margin:32px 0 0}
/* Native dialog supplies focus containment, Escape and inert background. */
.preview-dialog{width:min(1600px,96vw);height:min(94vh,1100px);height:min(94dvh,1100px);max-width:none;max-height:none;padding:0;border:1px solid #53747e;border-radius:10px;background:#102630;color:#e1f2f1;box-shadow:0 30px 100px #0008;overflow:hidden}
.preview-dialog[open]{display:flex;flex-direction:column}
.preview-dialog::backdrop{background:#020e14e8}
.preview-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:18px 23px;border-bottom:1px solid #365761;flex:none}
.preview-dialog h2{font-size:20px;font-weight:400;line-height:1.3;margin:0 0 4px}
.preview-dialog-header p{font-size:12px;line-height:1.6;color:#a9c4cb;margin:0}
.preview-dialog button{font:inherit;font-size:14px;min-height:44px;padding:10px 17px;border:1px solid #527681;background:none;color:#d8efed;cursor:pointer;border-radius:4px;flex:none}
.preview-dialog-media{min-height:0;flex:1;display:grid;place-items:center;padding:18px;background:radial-gradient(ellipse at center,#294751,#102630);overflow:auto}
.preview-dialog-media img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:1000px){.preview-caption{align-items:start;flex-direction:column;gap:13px}.phone-showcase{--phone-width:245px}.contracts-preview{grid-template-columns:44px minmax(0,1fr)}.contracts-status{grid-column:2;margin:0;border-left:0;padding:0}}
@media(max-width:760px){
  .preview-heading{gap:12px}.preview-badge{font-size:11px}.preview-count{font-size:11px}
  .preview-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.preview-tabs button{font-size:13px;padding-right:0}
  .preview-panel{border-radius:8px;box-shadow:0 16px 40px #0003}.preview-windowbar{min-height:44px;padding:12px;gap:12px;font-size:10px}.preview-windowbar img{width:63px}.preview-windowbar>span:last-child{display:none}
  .preview-caption{padding:22px 20px 17px;gap:12px}.preview-caption h3{font-size:25px;line-height:1.2}.preview-caption p:not(.preview-category){font-size:14px}.preview-category{font-size:10px}
  .incident-tour{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0 20px 20px;gap:8px}.incident-tour button{font-size:12px;padding:10px 8px;text-align:left}
  .preview-disclaimer{font-size:11px;line-height:1.7}.interface-preview{margin-bottom:32px}
  .phone-showcase{--phone-width:min(270px,72vw);max-width:440px}.phone-stage{perspective:1000px}
  .phone-controls{gap:4px 9px}.phone-controls input{width:90px}.phone-scenes{margin-top:5px}
  .mobile-preview-note{margin-bottom:21px}.mobile-preview-note p{font-size:13px}
  .contracts-preview{margin-top:36px;padding-top:28px;grid-template-columns:32px minmax(0,1fr);gap:15px}.contracts-symbol{width:30px;height:40px}.contracts-preview h3{font-size:25px}.contracts-preview p:not(.preview-category):not(.contracts-status){font-size:14px}.contracts-status{font-size:11px}
  .preview-dialog{width:calc(100vw - 20px);height:calc(100dvh - 30px);border-radius:7px}.preview-dialog-header{padding:15px;gap:12px}.preview-dialog h2{font-size:17px}.preview-dialog-header p{font-size:11px}.preview-dialog button{font-size:12px;padding:8px 12px}.preview-dialog-media{padding:8px}
}
@media(prefers-reduced-motion:reduce){.preview-media>img{transition:none}.phone-stage{perspective:none}}
@supports not (transform-style:preserve-3d){.phone-back,.phone-edge,.phone-side-button{display:none}.phone-solid,.phone-front{transform:none!important}}