/* ============================================================
   scout-interactive.css
   Faithful port of the real Scout feature-page components:
   - Live SOC 2 extraction (.exwrap / .ex-*)
   - Hudson breach-investigation chat (.hz / .hz-*)
   - Lightbox (.lbx)
   Pulled from the production scout.css so the homepage matches
   the real product site. Token aliases map the repo's variable
   names onto scout-home.css's palette.
   ============================================================ */

:root{
  --border:var(--line);
  --border-2:var(--line-2);
  --text-2:var(--t2);
  --text-3:var(--t3);
  --text-4:var(--t4);
  --font-d:var(--fd);
  --font-m:var(--fm);
  --font-b:var(--fd);
  --tealdim:rgba(13,148,136,0.14);
}

/* ===== compass scan mark ===== */
@keyframes scanSpin{to{transform:rotate(360deg);}}
.compass{position:relative;width:20px;height:20px;flex:0 0 auto;color:var(--acc-hi);}
.compass svg{display:block;}
.compass.scanning svg{animation:scanSpin 1.1s linear infinite;transform-origin:center;}

/* ===== beacon (standby) ===== */
@keyframes hr1{from{transform:rotate(30deg)}to{transform:rotate(390deg)}}
@keyframes hr2{from{transform:rotate(150deg)}to{transform:rotate(510deg)}}
@keyframes hr3{from{transform:rotate(270deg)}to{transform:rotate(630deg)}}
.beacon{display:block;overflow:visible;}
.beacon .bring,.beacon .bnode{transform-box:fill-box;transform-origin:center;}
.beacon .b1{transform:rotate(30deg);}.beacon .b2{transform:rotate(150deg);stroke-opacity:0.62;}.beacon .b3{transform:rotate(270deg);stroke-opacity:0.46;}
.beacon.analyzing .b1{animation:hr1 4s linear infinite;}.beacon.analyzing .b2{animation:hr2 6.5s linear infinite;}.beacon.analyzing .b3{animation:hr3 9.5s linear infinite;}
@media(prefers-reduced-motion:reduce){.beacon .bring,.compass.scanning svg{animation:none !important;}}

/* ===== Live SOC 2 extraction ===== */
.exwrap{margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border-2);border-radius:5px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.4),0 44px 92px -42px rgba(0,0,0,0.82);}
@media(max-width:900px){.exwrap{grid-template-columns:1fr;}}
.ex-col{background:var(--bg-2);min-width:0;display:flex;flex-direction:column;}
.ex-head{display:flex;align-items:center;gap:0.8rem;padding:1rem 1.2rem;border-bottom:1px solid var(--border);background:rgba(255,255,255,0.015);}
.ex-fileico{font-family:var(--font-m);font-size:0.56rem;letter-spacing:0.08em;color:var(--crit);border:1px solid rgba(240,101,75,0.4);border-radius:5px;padding:0.3rem 0.42rem;background:rgba(240,101,75,0.08);flex:0 0 auto;}
.ex-fmeta{min-width:0;flex:1;}
.ex-fname{font-family:var(--font-d);font-weight:600;font-size:0.9rem;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ex-fsub{font-family:var(--font-m);font-size:0.56rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-4);margin-top:0.2rem;}
.ex-run{flex:0 0 auto;display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-d);font-size:0.78rem;font-weight:700;color:#04201d;background:var(--acc);border:0;border-radius:5px;padding:0.55rem 0.9rem;cursor:pointer;transition:background .2s,opacity .2s;}
.ex-run:hover{background:var(--acc-hi);}
.ex-run:disabled{opacity:0.65;cursor:default;}
.ex-run-spin{width:13px;height:13px;border-radius:50%;border:2px solid rgba(4,32,29,0.35);border-top-color:#04201d;display:none;}
.is-analyzing .ex-run-spin{display:inline-block;animation:exspin .7s linear infinite;}
@keyframes exspin{to{transform:rotate(360deg);}}
.ex-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:1.1rem;}
.ex-doc{position:relative;border:1px solid var(--border);border-radius:6px;background:linear-gradient(180deg,#0c0d0d,#0a0b0b);padding:1rem 1.1rem;overflow:hidden;}
.ex-scanline{position:absolute;left:0;right:0;top:0;height:44px;background:linear-gradient(180deg,rgba(45,212,191,0),rgba(45,212,191,0.22),rgba(45,212,191,0));opacity:0;pointer-events:none;}
.is-analyzing .ex-scanline{opacity:1;animation:exscan 1.7s var(--ease);}
@keyframes exscan{0%{transform:translateY(-44px);}100%{transform:translateY(240px);}}
.ex-page{display:flex;flex-direction:column;gap:0.5rem;}
.ex-ln{height:7px;border-radius:4px;background:rgba(255,255,255,0.07);}
.ex-ln.w90{width:90%}.ex-ln.w85{width:85%}.ex-ln.w80{width:80%}.ex-ln.w75{width:75%}.ex-ln.w70{width:70%}.ex-ln.w60{width:60%}.ex-ln.w55{width:55%}.ex-ln.w50{width:50%}.ex-ln.w40{width:40%}
.ex-ctrls-h{font-family:var(--font-m);font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-4);margin-bottom:0.6rem;display:flex;justify-content:space-between;}
.ex-ctrls-h b{color:var(--acc-hi);font-weight:500;}
.ex-ctrl{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;padding:0.5rem 0.7rem;border:1px solid var(--border);border-radius:5px;background:var(--bg);font-size:0.82rem;color:var(--text-2);margin-bottom:0.4rem;opacity:0;transform:translateY(6px);}
.is-done .ex-ctrl{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease);}
.ex-ctrl .cc{font-family:var(--font-m);color:var(--acc-hi);font-size:0.7rem;margin-right:0.55rem;}
.ex-cs{font-family:var(--font-m);font-size:0.58rem;letter-spacing:0.04em;display:inline-flex;align-items:center;gap:0.35rem;white-space:nowrap;}
.ex-cs .d{width:6px;height:6px;border-radius:50%;}
.ex-cs.ok{color:var(--good);}.ex-cs.ok .d{background:var(--good);}
.ex-cs.warn{color:#f6a04a;}.ex-cs.warn .d{background:#f6a04a;}
.ex-cs.bad{color:var(--crit);}.ex-cs.bad .d{background:var(--crit);}
.ex-right{position:relative;}
.ex-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.1rem;padding:3rem 2rem;min-height:100%;color:var(--text-3);}
.ex-empty .beacon{width:46px;color:var(--acc-hi);filter:drop-shadow(0 0 20px rgba(13,148,136,0.45));}
.ex-empty p{font-size:0.92rem;line-height:1.6;max-width:30ch;}
.ex-empty b{color:#fff;}
.is-done .ex-empty,.is-analyzing .ex-empty{display:none;}
.ex-result{display:none;padding:1.1rem 1.2rem 1.3rem;flex-direction:column;gap:1.05rem;}
.is-done .ex-result{display:flex;}
.ex-rhead{display:flex;align-items:center;gap:0.5rem;font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--acc-hi);}
.ex-rhead .compass{width:15px;height:15px;}
.ex-sum{font-size:0.92rem;line-height:1.6;color:var(--text-2);border-left:2px solid var(--acc);padding-left:0.9rem;}
.ex-bh{font-family:var(--font-m);font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-4);margin-bottom:0.65rem;display:flex;align-items:center;gap:0.5rem;}
.ex-bn{color:var(--acc-hi);border:1px solid rgba(13,148,136,0.4);border-radius:999px;padding:0.1rem 0.45rem;}
.ex-chips{display:flex;flex-wrap:wrap;gap:0.5rem;}
.ex-chip{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-b);font-size:0.8rem;color:var(--text-2);border:1px solid var(--border-2);border-radius:999px;padding:0.4rem 0.7rem 0.4rem 0.85rem;background:var(--bg-2);cursor:pointer;transition:border-color .2s,background .2s,color .2s;}
.ex-chip .cat{font-family:var(--font-m);font-size:0.52rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-4);}
.ex-chip .pl{font-family:var(--font-d);font-weight:700;color:var(--acc-hi);width:0.9em;text-align:center;}
.ex-chip:hover{border-color:var(--acc);}
.ex-chip.added{border-color:rgba(13,148,136,0.5);background:var(--tealdim);color:#fff;}
.ex-chip.added .pl{color:var(--good);}
.ex-conns{display:flex;flex-direction:column;gap:0.5rem;}
.ex-conn{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;padding:0.55rem 0.6rem 0.55rem 0.78rem;border:1px solid var(--border);border-radius:5px;background:var(--bg);font-size:0.82rem;}
.ex-conn .path{display:flex;align-items:center;gap:0.5rem;color:var(--text-2);min-width:0;}
.ex-conn .path b{font-weight:600;}
.ex-conn .ar{color:var(--acc-hi);}
.ex-conn-r{display:flex;align-items:center;gap:0.6rem;flex:0 0 auto;}
.ex-conn .ty{font-family:var(--font-m);font-size:0.52rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-4);border:1px solid var(--border-2);border-radius:4px;padding:0.12rem 0.4rem;}
.ex-addbtn{font-family:var(--font-d);font-size:0.7rem;font-weight:700;color:var(--acc-hi);background:transparent;border:1px solid rgba(13,148,136,0.4);border-radius:6px;padding:0.32rem 0.62rem;cursor:pointer;transition:background .2s;white-space:nowrap;}
.ex-addbtn:hover{background:var(--tealdim);}
.ex-conn.added{border-color:rgba(13,148,136,0.45);background:var(--tealdim);}
.ex-conn.added .ex-addbtn{color:var(--good);border-color:rgba(62,201,138,0.4);}
.ex-find{border:1px solid var(--border);border-radius:5px;background:var(--bg);padding:0.8rem 0.9rem;margin-bottom:0.5rem;}
.ex-find:last-child{margin-bottom:0;}
.ex-find-top{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.45rem;}
.ex-sev{font-family:var(--font-m);font-size:0.52rem;letter-spacing:0.06em;text-transform:uppercase;color:#f6a04a;border:1px solid rgba(246,160,74,0.4);border-radius:4px;padding:0.12rem 0.4rem;}
.ex-find-cat{font-family:var(--font-m);font-size:0.52rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-4);}
.ex-find b{font-family:var(--font-d);font-size:0.9rem;font-weight:600;letter-spacing:-0.01em;}
.ex-find p{font-size:0.8rem;color:var(--text-3);line-height:1.5;margin-top:0.3rem;}
.ex-find-act{margin-top:0.65rem;}
.ex-cbtn{font-family:var(--font-d);font-size:0.72rem;font-weight:700;color:#04201d;background:var(--acc);border:0;border-radius:6px;padding:0.42rem 0.72rem;cursor:pointer;transition:background .2s;}
.ex-cbtn:hover{background:var(--acc-hi);}
.ex-cbtn.done{background:transparent;color:var(--good);border:1px solid rgba(62,201,138,0.4);cursor:default;}
.ex-foot{display:flex;align-items:center;justify-content:space-between;padding-top:0.85rem;border-top:1px solid var(--border);font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-4);}
.ex-foot{padding:0.85rem 1.2rem;}
.ex-reset{font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3);background:transparent;border:1px solid var(--border-2);border-radius:6px;padding:0.35rem 0.7rem;cursor:pointer;transition:border-color .2s,color .2s;}
.ex-reset:hover{border-color:var(--acc);color:#fff;}
.ex-reveal{opacity:0;transform:translateY(10px);}
.is-done .ex-reveal{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease);}
.is-done .ex-reveal:nth-child(2){transition-delay:.05s;}
.is-done .ex-reveal:nth-child(3){transition-delay:.18s;}
.is-done .ex-reveal:nth-child(4){transition-delay:.3s;}
.is-done .ex-reveal:nth-child(5){transition-delay:.42s;}
.is-done .ex-reveal:nth-child(6){transition-delay:.54s;}
@media(prefers-reduced-motion:reduce){.ex-reveal,.ex-ctrl{opacity:1!important;transform:none!important;}.ex-scanline{display:none;}}

/* ===== Hudson breach-investigation chat ===== */
@keyframes hpPulse{0%{box-shadow:0 0 0 0 rgba(255,90,72,0.45)}70%{box-shadow:0 0 0 7px rgba(255,90,72,0)}100%{box-shadow:0 0 0 0 rgba(255,90,72,0)}}
.hz{margin-top:3rem;border:1px solid rgba(139,109,240,0.28);border-radius:5px;background:linear-gradient(170deg,#0d0a16,#0a0a0d);overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.4),0 44px 100px -44px rgba(139,109,240,0.4);}
.hz-bar{display:flex;align-items:center;gap:0.9rem;padding:0.9rem 1.2rem;border-bottom:1px solid var(--border);background:rgba(139,109,240,0.05);flex-wrap:wrap;}
.hz-rec{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:#ff7a6a;}
.hz-rec .d{width:8px;height:8px;border-radius:50%;background:#ff5a48;}
@media(prefers-reduced-motion:no-preference){.hz-rec .d{animation:hpPulse 1.6s ease-out infinite;}}
.hz-alert{font-family:var(--font-m);font-size:0.66rem;color:var(--text-3);letter-spacing:0.02em;}
.hz-mon{margin-left:auto;font-family:var(--font-m);font-size:0.56rem;letter-spacing:0.1em;text-transform:uppercase;color:#b89bff;}
.hz-thread{padding:1.4rem 1.4rem 0.4rem;display:flex;flex-direction:column;gap:1.1rem;}
.hz-msg{display:flex;flex-direction:column;gap:0.4rem;max-width:92%;}
.hz-msg.you{align-self:flex-end;align-items:flex-end;}
.hz-msg.hud{align-self:flex-start;max-width:100%;}
.hz-msg .who{font-family:var(--font-m);font-size:0.56rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-4);}
.hz-msg .who.hud{color:#b89bff;}
.hz-msg .bub{font-size:0.92rem;line-height:1.55;color:var(--text-2);background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:12px 2px 12px 12px;padding:0.7rem 0.95rem;}
.hz-msg .bub b{color:#fff;font-weight:600;}
.hz-msg.hud .bub{border-radius:2px 12px 12px 12px;background:rgba(139,109,240,0.06);border-color:rgba(139,109,240,0.2);}
.hz-typing{display:none;align-self:flex-start;gap:5px;padding:0.75rem 0.95rem;border:1px solid rgba(139,109,240,0.2);background:rgba(139,109,240,0.06);border-radius:2px 12px 12px 12px;}
.hz-typing.on{display:flex;}
.hz-typing span{width:5px;height:5px;border-radius:50%;background:#b89bff;opacity:0.4;}
@media(prefers-reduced-motion:no-preference){.hz-typing span{animation:hzdot 1s infinite;}.hz-typing span:nth-child(2){animation-delay:.18s;}.hz-typing span:nth-child(3){animation-delay:.36s;}}
@keyframes hzdot{0%,100%{opacity:0.25;}50%{opacity:1;}}
.hz-detail{padding:0 1.4rem;}
.hz-find-h{font-family:var(--font-m);font-size:0.56rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-4);margin-bottom:0.6rem;}
.hz-finds{list-style:none;display:flex;flex-direction:column;gap:0.55rem;margin:0 0 0.9rem;padding:0;}
.hz-finds li{display:grid;grid-template-columns:auto 1fr;gap:0.6rem;align-items:start;font-size:0.86rem;color:var(--text-2);line-height:1.5;opacity:0;transform:translateY(6px);}
.hz-finds li .dot{width:6px;height:6px;border-radius:50%;background:#8b6df0;margin-top:0.5rem;}
.hz-finds li.crit .dot{background:var(--crit);}
.hz-finds li b{color:#fff;font-weight:600;}
.is-revealed .hz-finds li{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease);}
.is-revealed .hz-finds li:nth-child(2){transition-delay:.1s;}.is-revealed .hz-finds li:nth-child(3){transition-delay:.2s;}.is-revealed .hz-finds li:nth-child(4){transition-delay:.3s;}
.hz-rec-txt{font-size:0.9rem;line-height:1.55;color:var(--text-2);margin-bottom:0.85rem;}
.hz-actions{display:flex;flex-direction:column;gap:0.5rem;}
.hz-act{display:flex;align-items:center;justify-content:space-between;gap:0.9rem;padding:0.6rem 0.7rem 0.6rem 0.85rem;border:1px solid var(--border-2);border-radius:5px;background:var(--bg-2);font-size:0.86rem;color:var(--text-2);transition:border-color .2s,background .2s;}
.hz-act .lab b{color:#fff;font-weight:600;}
.hz-act .lab .tag{font-family:var(--font-m);font-size:0.5rem;letter-spacing:0.06em;text-transform:uppercase;color:#ff7a6a;border:1px solid rgba(255,90,72,0.4);border-radius:4px;padding:0.1rem 0.36rem;margin-right:0.5rem;}
.hz-do{font-family:var(--font-d);font-size:0.72rem;font-weight:700;color:#0a0a0a;background:#b89bff;border:0;border-radius:6px;padding:0.4rem 0.72rem;cursor:pointer;transition:background .2s;white-space:nowrap;flex:0 0 auto;}
.hz-do:hover{background:#cdb8ff;}
.hz-act.done{border-color:rgba(13,148,136,0.5);background:rgba(13,148,136,0.08);}
.hz-act.done .hz-do{background:transparent;color:var(--acc);border:1px solid rgba(13,148,136,0.5);cursor:default;}
.hz-resolved{display:none;align-items:center;gap:0.5rem;margin-top:0.9rem;padding:0.7rem 0.9rem;border:1px solid rgba(13,148,136,0.5);border-radius:5px;background:rgba(13,148,136,0.08);color:var(--acc);font-size:0.86rem;font-weight:600;}
.hz-resolved.on{display:flex;}
.hz-resolved svg{width:16px;height:16px;flex:0 0 auto;}
.hz-srcs{margin-top:0.9rem;font-family:var(--font-m);font-size:0.58rem;letter-spacing:0.04em;color:var(--text-4);display:flex;align-items:center;gap:0.45rem;}
.hz-foot{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.4rem 1.4rem;flex-wrap:wrap;}
.hz-run{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-d);font-size:0.82rem;font-weight:700;color:#0a0a0a;background:#b89bff;border:0;border-radius:5px;padding:0.6rem 1rem;cursor:pointer;transition:background .2s;}
.hz-run:hover{background:#cdb8ff;}
.hz-run svg{width:14px;height:14px;}
.hz-prog{font-family:var(--font-m);font-size:0.62rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-4);}
.hz-reveal{opacity:0;}
.is-revealed .hz-reveal{opacity:1;transition:opacity .5s var(--ease) .15s;}
@media(prefers-reduced-motion:reduce){.hz-finds li,.hz-reveal{opacity:1!important;transform:none!important;}}

/* ===== Lightbox ===== */
.lbx{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:4vw;background:rgba(3,3,3,0.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;}
.lbx.open{display:flex;opacity:1;}
.lbx-card{position:relative;max-width:1180px;width:100%;border-radius:6px;overflow:hidden;border:1px solid var(--border-2);background:var(--bg-2);box-shadow:0 40px 120px -30px rgba(0,0,0,0.9);}
.lbx-card img{width:100%;display:block;max-height:76vh;object-fit:contain;background:#0a0a0a;}
.lbx-cap{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding:1.05rem 1.3rem;border-top:1px solid var(--border);}
.lbx-cap .t{font-family:var(--font-d);font-size:1.05rem;font-weight:600;letter-spacing:-0.01em;}
.lbx-cap .t small{display:block;font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--acc-hi);margin-bottom:0.32rem;font-weight:400;}
.lbx-cap .d{font-size:0.85rem;color:var(--text-3);max-width:48ch;text-align:right;}
@media(max-width:640px){.lbx-cap{flex-direction:column;align-items:flex-start;gap:0.5rem;}.lbx-cap .d{text-align:left;}}
.lbx-close{position:absolute;top:0.9rem;right:0.9rem;width:36px;height:36px;border-radius:5px;border:1px solid var(--border-2);background:rgba(8,8,8,0.7);color:#fff;font-size:0.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s;}
.lbx-close:hover{border-color:var(--acc);background:var(--tealdim);}
img.zoomable{cursor:zoom-in;}


/* ============ MONITOR, stacked spotlight ============ */
.mstack{position:relative;max-width:960px;margin:3.2rem auto 0;padding-top:160px;}
.mstack-light{position:absolute;left:50%;top:-60px;transform:translateX(-50%);width:min(150%,100vw);height:480px;z-index:0;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%, rgba(45,212,191,0.11), rgba(45,212,191,0.03) 38%, transparent 66%);filter:blur(34px);}
.mcard{position:absolute;left:50%;top:160px;transform:translateX(-50%);border-radius:7px;overflow:hidden;
  border:1px solid var(--border);background:#0a0a0a;}
.mcard img{display:block;width:100%;height:auto;cursor:zoom-in;}
.mcard.back,.mcard.mid{cursor:pointer;transition:transform .28s var(--ease),opacity .28s var(--ease),box-shadow .28s var(--ease);}
.mcard.back{width:80%;transform:translateX(-50%) translateY(-126px) scale(0.93);z-index:1;opacity:0.52;
  box-shadow:0 -8px 40px -16px rgba(0,0,0,0.8),0 30px 60px -30px rgba(0,0,0,0.9);}
.mcard.mid{width:90%;transform:translateX(-50%) translateY(-66px) scale(0.965);z-index:2;opacity:0.78;
  box-shadow:0 -8px 40px -16px rgba(0,0,0,0.8),0 30px 60px -30px rgba(0,0,0,0.9);}
.mcard.back:hover{opacity:0.72;transform:translateX(-50%) translateY(-134px) scale(0.93);}
.mcard.mid:hover{opacity:0.95;transform:translateX(-50%) translateY(-74px) scale(0.965);}
.mcard.front{position:relative;left:auto;top:auto;transform:none;width:100%;z-index:3;
  padding:clamp(12px,2vw,22px);background:linear-gradient(180deg,#0c0d0f,#08090a);
  border-color:rgba(255,255,255,0.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.55), 0 60px 120px -42px rgba(0,0,0,1);}
.mcard.front::before{content:"";position:absolute;left:50%;top:0;width:130%;height:200px;transform:translateX(-50%);
  pointer-events:none;z-index:0;background:radial-gradient(58% 100% at 50% 0,rgba(255,255,255,0.05),transparent 72%);}
.mshot{position:relative;z-index:1;border-radius:7px;overflow:hidden;border:1px solid rgba(255,255,255,0.055);background:#0a0a0a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 60px -34px rgba(0,0,0,0.9);}
.mcard.front .mshot img{display:block;width:100%;height:auto;}
.mcard.front .mcard-sheen{display:none;}
.mstack-cap{position:relative;z-index:3;text-align:center;margin-top:1.5rem;font-size:0.92rem;color:var(--text-3);}
.mstack-cap span{color:var(--text-4);}
@media (max-width:760px){
  .mstack{padding-top:120px;}
  .mcard{top:120px;}
  .mcard.back{transform:translateX(-50%) translateY(-96px) scale(0.93);}
  .mcard.mid{transform:translateX(-50%) translateY(-50px) scale(0.965);}
}