/* CygneNoir Managed Services (MSSP) page.
   Shared components (nav, .head, .cols/.col, .sectors, contact card, footer, lattice
   backgrounds) come from site.css; this file holds what the MSSP page adds: the live
   eyebrow, the hero campus model, the navy "night shift" band with its 24-hour ribbon
   and stats, the scroll-driven "How the platform works" section, control chips,
   integrations and the FAQ. Figure base styles are in mssp-iso.css (generated). */

/* Geist Mono (SIL Open Font License, see assets/fonts/OFL.txt), self-hosted variable font */
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy-2:#13264A;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --lat-night:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='37'%3E%3Cpath d='M0 18.5 36 0 72 18.5 36 37Z' fill='none' stroke='%23233A62' stroke-width='1'/%3E%3C/svg%3E");
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- hero: headline over the whole campus model */
.mssp-hero{padding-top:clamp(40px,6vw,76px)}
.mssp-hero::after{top:clamp(420px,42vw,560px);bottom:auto;translate:-50% -10%;
  background:radial-gradient(closest-side,rgba(30,144,238,.14),rgba(30,144,238,.04) 55%,transparent)}
.mssp-hero .hero-fx{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 70%,transparent 92%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 70%,transparent 92%)}
.hero-copy{position:relative;text-align:center}
.mssp-hero h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.04em;max-width:14ch;margin:18px auto 0}
.mssp-hero h1 .w{display:inline-block;white-space:pre}
.mssp-hero .sub{max-width:62ch;margin:22px auto 0}

/* live eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 14px 0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);font-size:14px;font-weight:500;color:var(--text-2);box-shadow:0 6px 16px -10px rgba(11,26,51,.25)}
.eyebrow .sep{color:var(--line-2)}
.eyebrow .mono{color:var(--text);font-size:13px}
.live{position:relative;width:8px;height:8px;border-radius:50%;background:#16A36A;flex:none}
.live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #16A36A;opacity:0;animation:live 2.4s ease-out infinite}
@keyframes live{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* the hero model: the whole campus, edge to edge under the headline */
.stage{position:relative;margin:clamp(8px,2vw,24px) auto 0;width:100%;max-width:1840px}
.stage::before,.stage::after{content:"";position:absolute;top:0;bottom:0;width:6vw;z-index:1;pointer-events:none}
.stage::before{left:0;background:linear-gradient(to right,var(--bg),rgba(244,246,249,0))}
.stage::after{right:0;background:linear-gradient(to left,var(--bg),rgba(244,246,249,0))}
@media (max-width:900px){
  /* on small screens the campus keeps its detail and pans sideways */
  .stage{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .stage::-webkit-scrollbar{display:none}
  .stage::before,.stage::after{display:none}
  .wf-stage{width:max(900px,220vw)}
}

/* Anatomy figures, in the site's light tokens (hero and platform) */
.wf.iso[data-theme="light"],.pf.iso[data-theme="light"]{
  --anatomy-page:var(--bg);--anatomy-card:#FFFFFF;--anatomy-text:var(--text-2);--anatomy-strong:var(--text);--anatomy-muted:#7A879B;
  --anatomy-paper:#FFFFFF;--anatomy-face:#FFFFFF;--anatomy-top:#FFFFFF;
  --anatomy-shade-0:#D6DEE9;--anatomy-shade-1:#E1E7F0;--anatomy-shade-2:#EAEFF5;--anatomy-shade-3:#F3F6FA;
  --anatomy-lit-top:#FFFFFF;--anatomy-lit-shade:#E8EEF6;
  --anatomy-hi:#1B2A44;--anatomy-mid:#7D8BA1;--anatomy-lo:#AEB9C9;--anatomy-faint:#D0D8E3;--anatomy-lit:#0B6BC4;
  --anatomy-halo:#6E819E;--anatomy-halo-opacity:.28;--anatomy-dot:#33435E;
  --anatomy-red:var(--red);--anatomy-blue:var(--blue);
  --anatomy-mono:var(--mono);
  --sev-crit:var(--red);--sev-crit-side:#C21E1C;--sev-crit-shade:#9E1715;
  --sev-high:var(--orange);--sev-high-side:#D45414;--sev-high-shade:#B0430E;
  --sev-low:var(--blue);--sev-low-side:#1678C9;--sev-low-shade:#0F62A6;
  margin:0;font-family:var(--font)
}
.wf-stage{outline:none;cursor:pointer;touch-action:pan-y;border-radius:18px}
.wf-stage:focus-visible{outline:1px solid var(--anatomy-muted);outline-offset:6px}
.wf-stage svg{display:block;width:100%;height:auto}
/* campus parts */
.cn-blink{fill:var(--blue);stroke:none;opacity:.22;animation:cn-blink 2.6s var(--d,0s) infinite}
@keyframes cn-blink{0%,100%{opacity:.22}8%{opacity:1}30%{opacity:.22}}
.cn-wave{fill:none;stroke:var(--blue);stroke-width:1;vector-effect:non-scaling-stroke}
.cn-core{fill:none;stroke:var(--blue);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.5;transition:opacity .3s}
.it[data-led="ai"][data-on] .cn-core{opacity:1}
.cn-dial{fill:#fff;stroke:var(--anatomy-mid);stroke-width:.8;vector-effect:non-scaling-stroke}
.cn-cards{fill:#DCE6F2;stroke:var(--anatomy-lo);stroke-width:.6;vector-effect:non-scaling-stroke}
.cn-newcard{fill:var(--orange);stroke:none}
.cn-card{fill:#DCE6F2;stroke:var(--anatomy-lo);stroke-width:.6;vector-effect:non-scaling-stroke}
.cn-card-live{fill:var(--orange);stroke:none}
.cn-filter .iso-top{fill:#CFE4F8}
.cn-wall .iso-top{fill:#EEF4FB}
.wf .it[data-led] .iso-top{transition:fill .2s}
.wf .it[data-led][data-on] .iso-top{fill:var(--blue)}
.rm .cn-blink{animation:none}

/* pucks take their severity colour on the top and the sides */
.wf-puck .iso-top,.wf-puck .iso-shade{transition:fill .35s ease}
.wf-puck[data-sev="crit"] .iso-top{fill:var(--sev-crit)}
.wf-puck[data-sev="crit"] .iso-shade[data-shade="2"],.wf-puck[data-sev="crit"] .iso-shade[data-shade="3"]{fill:var(--sev-crit-side)}
.wf-puck[data-sev="crit"] .iso-shade[data-shade="0"],.wf-puck[data-sev="crit"] .iso-shade[data-shade="1"]{fill:var(--sev-crit-shade)}
.wf-puck[data-sev="high"] .iso-top{fill:var(--sev-high)}
.wf-puck[data-sev="high"] .iso-shade[data-shade="2"],.wf-puck[data-sev="high"] .iso-shade[data-shade="3"]{fill:var(--sev-high-side)}
.wf-puck[data-sev="high"] .iso-shade[data-shade="0"],.wf-puck[data-sev="high"] .iso-shade[data-shade="1"]{fill:var(--sev-high-shade)}
.wf-puck[data-sev="low"] .iso-top{fill:var(--sev-low)}
.wf-puck[data-sev="low"] .iso-shade[data-shade="2"],.wf-puck[data-sev="low"] .iso-shade[data-shade="3"]{fill:var(--sev-low-side)}
.wf-puck[data-sev="low"] .iso-shade[data-shade="0"],.wf-puck[data-sev="low"] .iso-shade[data-shade="1"]{fill:var(--sev-low-shade)}
.wf-puck[data-sev] .iso-line[data-tone="faint"]{stroke:#fff;stroke-opacity:.55}

.wf-bin-tag{stroke:none}
.wf-bin-tag[data-sev="crit"]{fill:var(--sev-crit)}
.wf-bin-tag[data-sev="high"]{fill:var(--sev-high)}
.wf-bin-tag[data-sev="low"]{fill:var(--sev-low)}
.wf-night{fill:var(--navy);fill-opacity:.08;stroke:none}
.wf-screen{fill:#13264A;stroke:none;transition:fill .2s}
.wf-stage[data-alarm] .wf-screen{fill:#8A1C1A}
.wf-head-led{fill:var(--anatomy-lo);stroke:none;transition:fill .2s}
.wf-stage[data-scan] .wf-head-led{fill:var(--blue)}
.wf-beam{fill:var(--blue);stroke:none;mix-blend-mode:multiply}
.wf-mark{stroke:none}
.wf-mark[data-sev="crit"]{fill:var(--sev-crit)}
.wf-mark[data-sev="high"]{fill:var(--sev-high)}
.wf-mark[data-sev="low"]{fill:var(--sev-low)}
.it[data-led] .iso-top{transition:fill .2s}
.it[data-led][data-on] .iso-top{fill:var(--blue)}
.wf-lens .iso-shade,.wf-lens .iso-top{transition:fill .25s}
.wf-glow{opacity:0;pointer-events:none;mix-blend-mode:multiply}
.wf-glow-0{stop-color:#FF6B5E}.wf-glow-1{stop-color:#E5242140}.wf-glow-2{stop-color:#E5242100}
.wf-stage[data-alarm] .wf-lens .iso-shade{fill:#F0716C}
.wf-stage[data-alarm] .wf-lens .iso-top{fill:#FFB3AE}

/* ---------- section heads */
.head-dark p{color:#B9C4D6}
.head-stack{grid-template-columns:1fr}

/* ---------- the night shift: navy band, lattice in the dark */
.night{position:relative;isolation:isolate;background:var(--navy);color:#fff;margin-top:clamp(72px,8vw,104px);overflow:hidden}
.night::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lat-night) center top/72px 37px;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse at 70% 0%,#000 0,transparent 75%);mask-image:radial-gradient(ellipse at 70% 0%,#000 0,transparent 75%)}
.night + .sec{padding-top:clamp(72px,10vw,128px)}
.ribbon{position:relative;padding:28px 28px 40px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.ribbon-row{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:16px;padding:8px 0}
.ribbon-name{font-size:14px;color:#B9C4D6}
.ribbon-track{position:relative;height:14px;border-radius:7px;background:rgba(255,255,255,.06)}
.ribbon-track::before{content:"";position:absolute;inset:0;border-radius:7px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/24 - 1px),rgba(255,255,255,.08) calc(100%/24 - 1px),rgba(255,255,255,.08) calc(100%/24))}
.ribbon-bar{position:absolute;top:0;bottom:0;left:calc(var(--from) / 24 * 100%);width:calc((var(--to) - var(--from)) / 24 * 100%);border-radius:7px;transform-origin:left center}
.ribbon-bar.office{background:#8FA0B6}
.ribbon-bar.threat{background:var(--red)}
.ribbon-bar.watch{background:linear-gradient(90deg,var(--blue),#4AA6F3)}
.ribbon-scale{display:grid;grid-template-columns:110px repeat(4,minmax(0,1fr)) 0;gap:0 16px;margin-top:6px;font:12px/1 var(--mono);color:#7F8FA9}
.ribbon-scale span:first-child{grid-column:2}
.ribbon-scale span:last-child{justify-self:end;margin-left:-2ch}
.ribbon-now{position:absolute;top:18px;bottom:22px;left:calc(28px + 110px + 16px + (100% - 56px - 126px) * var(--now,0));width:1px;background:#fff;pointer-events:none}
.ribbon-now b{position:absolute;bottom:-18px;left:50%;translate:-50% 0;font-size:11px;font-weight:500;color:#fff;white-space:nowrap}
@media (max-width:640px){
  .ribbon{padding:20px 16px 36px}
  .ribbon-row{grid-template-columns:76px minmax(0,1fr);gap:10px}
  .ribbon-scale{grid-template-columns:76px repeat(4,minmax(0,1fr)) 0;gap:0 10px}
  .ribbon-now{left:calc(16px + 76px + 10px + (100% - 32px - 86px) * var(--now,0))}
}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px}
@media (max-width:960px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}
.stat{border-top:2px solid rgba(255,255,255,.85);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.stat b{font-size:clamp(36px,3.6vw,48px);font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat p{color:#B9C4D6;font-size:15px}
.cite{margin-top:auto;font-size:12.5px;color:#7FA6D3}
.cite:hover{color:#B9D6F5;text-decoration:underline;text-underline-offset:3px}

/* ---------- what is included (site .col, with a tag line) */
.col-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text-3);margin-bottom:14px}
.col-tag i{width:8px;height:8px;border-radius:2px;background:var(--c,var(--blue))}
#included .col{transition:border-color .2s}
#included .col:hover{border-color:#9CC6EE}
#included .col ul{margin-bottom:0}
.ctl{display:inline-block;align-self:flex-start;margin-top:14px;padding:3px 8px;border-radius:6px;background:var(--surface);border:1px solid #CFDDF0;font-size:11.5px;color:var(--blue-btn)}

/* ---------- how the platform works. The model stays put while the steps scroll past;
   the step in view expands its tile on the board and its card beside it. */
.how .wrap{max-width:1480px}
.how-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(320px,1fr);gap:clamp(20px,3vw,48px);align-items:start}
.how-fig{position:sticky;top:80px;height:calc(100vh - 96px);min-height:460px;display:flex;flex-direction:column;gap:10px}
.pf{margin:0;flex:1;min-height:0;display:flex}
/* the stage fills the sticky column; the board inside is framed by a camera (platform.js) */
.pf-stage{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:var(--r-lg);background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%)}
.pf-stage > svg.iso-svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 72%,transparent 100%)}
/* notes on the model, styled like the home page callouts */
.pf-notes{position:absolute;inset:0;pointer-events:none}
.pf-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pf-leaders path{fill:none;stroke:#8FA0B6;stroke-width:1;opacity:0;transition:opacity .3s,stroke .3s}
.pf-leaders circle{fill:#fff;stroke:#8FA0B6;stroke-width:1.5;opacity:0;transition:opacity .3s,fill .3s,stroke .3s}
.pf-leaders .on{opacity:1}
.pf-leaders path.pulse{stroke:var(--blue-btn);stroke-width:1.5}
.pf-leaders circle.pulse{stroke:var(--blue-btn);fill:var(--blue)}
.pf-note{position:absolute;left:0;top:0;max-width:200px;padding:7px 11px;border-radius:10px;font-size:13px;line-height:1.35;font-weight:500;color:var(--text);
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(210,217,227,.95);box-shadow:0 10px 24px -14px rgba(11,26,51,.3);opacity:0;visibility:hidden;transition:border-color .25s,box-shadow .25s,color .25s}
.pf-note.on{visibility:visible}
.pf-note.pulse{border-color:var(--blue);color:var(--blue-btn);box-shadow:0 12px 28px -12px rgba(11,107,196,.4)}
.pf-tile{cursor:pointer}
.pf-void{fill:#1B2A44;fill-opacity:.82;stroke:none}
.pf-screen{fill:#13264A;stroke:none}
.pf-bar{fill:#3BA0F2;stroke:none}
.pf-rank{fill:var(--anatomy-faint);stroke:none;transition:fill .2s}
.pf-rank[data-on]{fill:var(--orange)}
.pf-ring{fill:none;stroke:var(--orange);stroke-width:1.2;vector-effect:non-scaling-stroke}
.pf-seal{fill:none;stroke:var(--blue-btn);stroke-width:1.4;vector-effect:non-scaling-stroke}
.pf-trace{transition:stroke .2s}
[data-trace].on .pf-trace{stroke:var(--blue-btn);stroke-dasharray:2 4;animation:iso-flow 900ms linear infinite}
.pf-asset .iso-top{transition:fill .3s}
.pf-asset[data-token] .iso-top{fill:#1B2A44}
.pf-asset[data-token] .iso-shade{fill:#33435E}
.pf-tile.on{--anatomy-hi:#0B5BA8;--anatomy-mid:#4C8FCF;--anatomy-lo:#9CC4EA;--anatomy-faint:#C9E0F5;
  --anatomy-top:#F5FAFF;--anatomy-shade-0:#CFE2F5;--anatomy-shade-1:#DBE9F8;--anatomy-shade-2:#E6F0FA;--anatomy-shade-3:#F0F6FC;--anatomy-halo-opacity:.4}
.pf[data-active] .pf-tile:not(.on){--anatomy-hi:#55647D;--anatomy-mid:#9AA6B8}
.pf-flow{transition:stroke .3s}
[data-duct].on .pf-flow{stroke:var(--blue-btn);stroke-dasharray:2 6;animation:iso-flow 1600ms linear infinite}
.pf-beam{fill:var(--blue);stroke:none;mix-blend-mode:multiply}
.pf-wedge{fill:var(--blue);fill-opacity:.12;stroke:none}
.pf-blip{stroke:none}
.pf-blip[data-sev="crit"]{fill:var(--red)}.pf-blip[data-sev="high"]{fill:var(--orange)}.pf-blip[data-sev="low"]{fill:var(--blue)}
.pf-agent-led{fill:var(--anatomy-faint);stroke:none;transition:fill .25s}
.pf-agent-led[data-on]{fill:var(--blue)}
.pf-cap .iso-top{transition:fill .25s}
.pf-cap[data-state="pass"] .iso-top{fill:#7DB9F2}
.pf-cap[data-state="fail"] .iso-top{fill:var(--red)}
.pf-cap[data-state="fail"] .iso-shade{fill:#F4B5B3}
.pf .it[data-led] .iso-top{transition:fill .2s}
.pf .it[data-led][data-on] .iso-top{fill:var(--blue)}
.how-dots{display:flex;gap:6px;justify-content:center;list-style:none;margin:0;padding:0}
.how-dots li{width:18px;height:4px;border-radius:2px;background:#C9D4E2;transition:background-color .3s,width .3s}
.how-dots li.on{width:36px;background:var(--blue-btn)}
.how-dots li.done{background:#8DBEEB}

.how-steps{list-style:none;margin:0;padding:0}
.hs{min-height:76vh;display:flex;align-items:center;padding-block:12px}
.hs:first-child{min-height:84vh}
.hs:last-child{min-height:70vh}
.hs-card{width:100%;padding:28px;border-radius:var(--r-lg);border:1px solid transparent;background:rgba(255,255,255,.4);transform-origin:left center;transition:background-color .35s,border-color .35s,box-shadow .35s}
.hs.on .hs-card{background:var(--surface);border-color:var(--line);box-shadow:0 24px 48px -30px rgba(11,26,51,.3)}
.hs-num{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:26px;padding:0 8px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px #CFDDF0;color:var(--blue-btn);font-size:12.5px;font-weight:500}
.hs.on .hs-num{background:var(--blue-btn);color:#fff;box-shadow:none}
.hs h3{font-size:clamp(26px,2.6vw,34px);line-height:1.1;margin-top:14px}
.hs-lead{color:var(--text-2);margin-top:10px;max-width:46ch}
.hs-more{overflow:hidden}
.hs-inner{padding-top:16px}
.hs-feats{list-style:none;margin:0;padding:0}
.hs-feats li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:15px;color:var(--text-2);line-height:1.5}
.hs-feats svg{width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--blue-btn);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.hs-feats b{display:block;font-weight:500;color:var(--text)}
.hs-model{margin-top:14px;font-size:12px;line-height:1.5;color:var(--text-3)}
/* desktop cards open and close; on phones they stay open so the page never shifts while scrolling */
@media (min-width:901px){.js .hs:not(.on) .hs-more{height:0;opacity:0}}
@media (max-width:900px){.hs:not(.on) .hs-card{opacity:.6}}

@media (max-width:900px){
  .how-grid{grid-template-columns:1fr;gap:0}
  .how-fig{top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:3;height:auto;min-height:0;padding:10px 0 8px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    background:var(--band)}
  .how-fig::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;pointer-events:none;background:linear-gradient(to bottom,var(--band),rgba(233,238,245,0))}
  .pf{height:44vh;flex:none}
  .pf-note{font-size:11px;max-width:140px;padding:5px 8px}
  .hs{min-height:64vh}
  .hs:first-child{min-height:48vh}
  .hs-card{padding:22px}
}

/* ---------- trust */
.integrations{margin-top:64px;padding:28px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.integrations h3{font-size:14px;font-weight:500;color:var(--text-3)}
.integrations .chips{margin-top:14px}
.integrations .chips li{padding:7px 12px;border-color:var(--line-2);font-size:14px;background:var(--bg)}

/* ---------- faq */
.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px 64px;align-items:start}
.faq-wrap .head{margin:0}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr}}
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:18px;font-weight:500;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s;color:var(--blue-btn)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{overflow:hidden}
.faq .ans p{color:var(--text-2);padding:0 0 22px;max-width:62ch}

/* ---------- depth (depth.js, globe.js) */
/* hero campus: a 3D rig that swings up into place and leans towards the pointer */
.stage{perspective:1800px;perspective-origin:50% 20%}
.stage-3d{transform-origin:50% 70%;will-change:transform}
html:not(.rm) .stage-3d{opacity:0;animation:rig-safety 0s 3s forwards}   /* shown by depth.js; never left hidden */
@keyframes rig-safety{to{opacity:1}}
.stage-floor{position:absolute;left:12%;right:12%;bottom:1%;height:14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,26,51,.18),rgba(11,26,51,.06) 60%,rgba(11,26,51,0));filter:blur(6px)}
@media (max-width:900px){.stage-floor{display:none}}
.motion-note{display:none}
.rm .motion-note{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin:18px auto 0;font-size:14px;color:var(--text-3)}
.motion-note button{font:inherit;font-weight:500;color:var(--blue-btn);background:var(--surface);border:1px solid #CFDDF0;border-radius:999px;padding:4px 12px;cursor:pointer}
.motion-note button:hover{border-color:var(--blue)}

/* headline words flip up, section blocks unfold from their top edge */
.mssp-hero h1{perspective:700px}
.mssp-hero h1 .w{transform-origin:50% 100%;backface-visibility:hidden}
[data-reveal]{transform-origin:50% 0}

/* cards that tilt, with a light under the pointer */
[data-tilt]{position:relative;transform-style:preserve-3d}
[data-tilt].tilting{z-index:2}
[data-tilt] > .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(30,144,238,.13),rgba(30,144,238,0) 60%)}
.stat > .glare,.contact > .glare{background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.12),rgba(255,255,255,0) 60%)}
[data-tilt].tilting > .glare{opacity:1}
#included .col.tilting{box-shadow:0 30px 50px -30px rgba(11,26,51,.35)}
.stat{border-radius:0 0 14px 14px;padding-inline:4px;transition:background-color .3s}
.stat.tilting{background:rgba(255,255,255,.03)}

/* step numbers turn over as their step becomes active */
.hs-num{transition:transform .8s cubic-bezier(.2,.7,.2,1),background-color .3s,color .3s,box-shadow .3s}
.hs.on .hs-num{transform:perspective(240px) rotateY(360deg)}

/* night band: heading beside the lattice globe */
.night-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px 56px;align-items:center;margin-bottom:36px}
.night-top .head{margin-bottom:0}
.globe{position:relative;width:100%;max-width:440px;aspect-ratio:1;justify-self:center;margin-block:-48px -24px}
.globe > svg,.globe > canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.globe > svg{transition:opacity .8s}
.globe > canvas{opacity:0;transition:opacity .8s}
.globe.ready > canvas{opacity:1}
.globe.ready > svg{opacity:0}
@media (max-width:900px){.night-top{grid-template-columns:1fr;margin-bottom:28px}.globe{display:none}}

/* reveal: anime.js animates these in; without JS they simply show */
.js [data-reveal]{opacity:0}
.rm [data-reveal]{opacity:1}
@media (forced-colors:active){.night::before{display:none}}
@media print{.js [data-reveal]{opacity:1}.stage,.how-fig{display:none}}