/* Preview v3: three calm interactions on top of preview-v2. Nothing moves until the visitor taps or moves. */
/* 1. Five steps, tap to see */
.sx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);align-items:stretch}
.sx-tabs{display:flex;flex-direction:column;gap:var(--s1);margin:0;padding:0;list-style:none}
.sx-tab{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:64px;padding:var(--s1) var(--s2);text-align:left;font:inherit;font-size:1.0625rem;font-weight:700;color:#fff;background:var(--dark3);border:1px solid rgba(255,255,255,.18);border-radius:8px;cursor:pointer}
.sx-tab:hover{border-color:var(--yellow)}
.sx-tab[aria-selected="true"]{background:var(--yellow);color:#0D0D0D;border-color:var(--yellow)}
.sx-num{flex:0 0 40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;background:rgba(255,255,255,.1);color:#fff}
.sx-tab[aria-selected="true"] .sx-num{background:#0D0D0D;color:var(--yellow)}
.sx-tab small{display:block;font-size:.9375rem;font-weight:500;opacity:.9}
.sx-panel{display:flex;flex-direction:column;background:var(--dark3);border:1px solid rgba(255,255,255,.12);border-radius:8px;overflow:hidden}
.sx-view{position:relative;aspect-ratio:16/10;background:#000;overflow:hidden}
.sx-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.sx-view img.on{display:block}
.sx-view-label{position:absolute;left:var(--s2);top:var(--s2);z-index:2;background:rgba(13,13,13,.88);color:#fff;font-size:.875rem;font-weight:700;padding:var(--s1) var(--s2);border-radius:6px;border:1px solid rgba(245,196,0,.6)}
.sx-view-note{position:absolute;right:var(--s2);bottom:var(--s2);z-index:2;background:rgba(13,13,13,.88);color:#E8E8E8;font-size:.875rem;padding:4px var(--s1);border-radius:6px}
.sx-view::before{content:'';position:absolute;inset:var(--s2);z-index:1;border:2px solid rgba(245,196,0,.55);border-radius:6px;pointer-events:none}
.sx-text{padding:var(--s3);flex:1}
.sx-text h3{font-size:1.375rem;color:#fff;margin:0 0 var(--s1)}
.sx-text p{margin:0}
@media(max-width:900px){.sx{grid-template-columns:1fr;gap:var(--s3)}}
/* without JS every step stays readable as a plain list */
.sx-nojs .sx-tabs{display:none}
.sx-nojs .sx-panel{margin-bottom:var(--s3)}
/* 2. Night view beam on the hero */
#hero .hero-bg{filter:brightness(.32)}
.hero-beam{position:absolute;inset:0;background-image:url(https://static.wixstatic.com/media/be083c_2112b06a0e264448ba81305f56bc730d~mv2.jpg/v1/fit/w_1600,h_900,q_80,enc_auto/hero.jpg);background-size:cover;background-position:center 40%;filter:brightness(1.05);transform:scale(1.03);opacity:0;-webkit-mask-image:radial-gradient(circle 190px at var(--bx,50%) var(--by,50%),#000 0%,rgba(0,0,0,.65) 55%,transparent 100%);mask-image:radial-gradient(circle 190px at var(--bx,50%) var(--by,50%),#000 0%,rgba(0,0,0,.65) 55%,transparent 100%);pointer-events:none}
#hero.beam-on .hero-beam{opacity:1}
#hero .hero-overlay{pointer-events:none}
.hero-hint{display:inline-block;margin-top:var(--s3);font-size:.9375rem;color:#E8E8E8}
.hero-beam-off .hero-bg{filter:brightness(.5)}
.hero-beam-off .hero-hint{display:none}
@media(hover:none){.hero-hint::before{content:'Touch and drag over the photo to light up the site. '}}
@media(hover:hover){.hero-hint::before{content:'Move your mouse over the photo to light up the site. '}}
@media(prefers-reduced-motion:reduce){.hero-beam{display:none}#hero .hero-bg{filter:brightness(.5)}.hero-hint{display:none}}
/* 3. Compare toggle */
.cmp-toggle{display:flex;gap:var(--s1);justify-content:center;margin:0 auto var(--s4);padding:var(--s1);background:var(--dark3);border:1px solid rgba(255,255,255,.18);border-radius:10px;width:fit-content;max-width:100%}
.cmp-btn{min-height:48px;padding:0 var(--s3);font:inherit;font-size:1rem;font-weight:700;color:#fff;background:transparent;border:2px solid transparent;border-radius:6px;cursor:pointer}
.cmp-btn[aria-pressed="true"]{background:var(--yellow);color:#0D0D0D}
.cmp-btn:hover{border-color:var(--yellow)}
.comp-grid.cmp-on{display:block;max-width:640px}
.comp-grid.cmp-on .comp-col[hidden]{display:none}
@media(max-width:480px){.cmp-btn{padding:0 var(--s2);flex:1}.cmp-toggle{width:100%}}
/* 4. Industry picker */
#site-type{background:var(--dark2);padding:var(--s12) 0}
@media(max-width:700px){#site-type{padding:var(--s8) 0}}
.ip-tabs{display:flex;flex-wrap:wrap;gap:var(--s1);justify-content:center;margin:0 auto var(--s4)}
.ip-tab{min-height:48px;padding:0 var(--s3);font:inherit;font-size:1rem;font-weight:700;color:#fff;background:var(--dark3);border:1px solid rgba(255,255,255,.18);border-radius:6px;cursor:pointer}
.ip-tab:hover{border-color:var(--yellow)}
.ip-tab[aria-selected="true"]{background:var(--yellow);color:#0D0D0D;border-color:var(--yellow)}
.ip-pane{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.ip-photo{aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#000;position:relative}
.ip-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ip-copy h3{font-size:1.25rem;color:#fff;margin:0 0 var(--s2)}
.ip-copy h3:not(:first-child){margin-top:var(--s4)}
.ip-risks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.ip-risks li{display:flex;flex-direction:column;gap:4px;padding-left:var(--s2);border-left:3px solid var(--yellow)}
.ip-risks strong{color:#fff;font-size:1.0625rem}
.ip-risks span{color:var(--text-2);font-size:1rem}
.ip-copy .btn{margin-top:var(--s3)}
.ip-nojs .ip-tabs{display:none}
.ip-nojs .ip-pane{margin-bottom:var(--s5)}
@media(max-width:900px){.ip-pane{grid-template-columns:1fr;gap:var(--s3)}.ip-copy .btn{width:100%}.ip-tabs{flex-direction:column}.ip-tab{width:100%}}
/* 5. Camera-view frame: static, no motion, no timestamps or numbers */
.cam{position:relative}
.cam::before{content:'';position:absolute;inset:12px;z-index:2;pointer-events:none;
 background:
  linear-gradient(#fff,#fff) top left/18px 2px no-repeat,linear-gradient(#fff,#fff) top left/2px 18px no-repeat,
  linear-gradient(#fff,#fff) top right/18px 2px no-repeat,linear-gradient(#fff,#fff) top right/2px 18px no-repeat,
  linear-gradient(#fff,#fff) bottom left/18px 2px no-repeat,linear-gradient(#fff,#fff) bottom left/2px 18px no-repeat,
  linear-gradient(#fff,#fff) bottom right/18px 2px no-repeat,linear-gradient(#fff,#fff) bottom right/2px 18px no-repeat;opacity:.9}
.cam::after{content:attr(data-cam);position:absolute;left:24px;top:24px;z-index:3;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 48px);background:rgba(13,13,13,.88);color:#fff;font-size:.875rem;font-weight:700;line-height:1.2;padding:4px 10px 4px 8px;border-radius:4px;pointer-events:none}
.cam > .rec,.cam::after{background-image:radial-gradient(circle at 8px 50%,#e5484d 0 4px,transparent 4.5px);background-repeat:no-repeat;padding-left:24px}
.video-play.cam .video-btn{z-index:4}
.video-play.cam .video-dur{z-index:3}
@media print{.cam::before,.cam::after{display:none}}
.sx,.ip,.cmp-toggle,#site-type,#how-it-works,#comparison{scroll-margin-top:96px}