@font-face{font-family:Inter;src:url(../assets/fonts/InterVariable.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --bg:#03070f; --ink:#e8eef7; --muted:#95a3b8; --faint:#5d6b80;
  --cyan:#58dcf8; --blue:#2a78e6; --violet:#9470f5; --gold:#e2ae5e; --risk:#ee7a5c;
  --glass:rgba(8,14,30,.62); --line:rgba(160,185,220,.14);
  --gutter:clamp(16px,4vw,56px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 Inter,system-ui,sans-serif;font-feature-settings:'ss01','cv11';-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;left:12px;top:-60px;z-index:50;padding:10px 14px;background:var(--ink);color:var(--bg);border-radius:6px}
.skip-link:focus{top:12px}
.c-cyan{color:var(--cyan)}.c-violet{color:var(--violet)}.c-gold{color:var(--gold)}.c-risk{color:var(--risk)}

/* ---------- Navigation: transparent over the world, dark glass once you move. */
.nav{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:28px;height:68px;padding:0 var(--gutter);transition:background .5s,backdrop-filter .5s,border-color .5s;border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgba(5,10,22,.55);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{display:block;height:36px;width:auto;margin-left:-6px}
#menu{display:flex;align-items:center;gap:26px;margin-left:auto}
#menu>a{font-size:13px;letter-spacing:.04em;color:var(--muted);text-decoration:none;background:none;border:0;padding:6px 0;cursor:pointer;transition:color .2s}
#menu>a:hover,#menu>a:focus-visible{color:var(--ink)}
.product--imperium:hover{color:var(--violet)!important}.product--otopia:hover{color:var(--gold)!important}.product--observatory:hover{color:var(--cyan)!important}
.demo{font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:10px 16px;border:1px solid rgba(226,174,94,.45);border-radius:999px;color:var(--gold);transition:background .2s,border-color .2s}
.demo:hover{background:rgba(226,174,94,.1);border-color:var(--gold)}
.menu-toggle{display:none}
.product{position:relative}
.preview{position:absolute;top:34px;left:50%;width:210px;padding:14px 14px 12px;transform:translate(-50%,6px);background:rgba(6,10,22,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:14px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;pointer-events:none}
.product:hover .preview,.product:focus-visible .preview{opacity:1;visibility:visible;transform:translate(-50%,0)}
.preview svg{display:block;width:100%;height:auto}
.preview small{display:block;margin-top:8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.pv-ring{fill:none;stroke:rgba(148,112,245,.55);stroke-width:1}
.pv-path{stroke:rgba(148,112,245,.25);stroke-width:1;stroke-dasharray:2 4}
.pv-dot--violet{fill:#e3d8ff;filter:drop-shadow(0 0 4px #9470f5)}
.pv-branch{fill:none;stroke:rgba(148,112,245,.5);stroke-width:1;stroke-dasharray:3 5;animation:dash 1.8s linear infinite}
.pv-grid{fill:rgba(88,220,248,.35)}
.pv-beam{fill:rgba(88,220,248,.18);transform-origin:80px 34px;animation:sweep 5s ease-in-out infinite alternate}
@keyframes sweep{from{transform:rotate(-8deg)}to{transform:rotate(196deg)}}
@keyframes dash{to{stroke-dashoffset:-16}}

/* ---------- The world is fixed; the document scrolls through it. */
.stage{position:fixed;inset:0;z-index:0;background:radial-gradient(120% 90% at 50% 30%,#07102a 0%,#03070f 60%,#02040a 100%)}
#world{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s}
.webgl #world{opacity:1}
.veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 95% at 50% 45%,transparent 50%,rgba(2,4,10,.7) 100%)}
.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.label{position:absolute;left:0;top:0;white-space:nowrap;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);opacity:0;will-change:transform,opacity;text-shadow:0 0 18px rgba(5,10,22,.9)}
.label small{display:block;margin-top:3px;font-size:10px;letter-spacing:.08em;text-transform:none;color:var(--muted)}
.label::before{content:'';position:absolute;left:-14px;top:6px;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.label--big{font-size:clamp(13px,1.2vw,17px);letter-spacing:.42em;font-weight:500}
.label--big::before{display:none}
.label--violet{color:var(--violet)}.label--gold{color:var(--gold)}.label--cyan{color:var(--cyan)}.label--risk{color:var(--risk)}.label--steel{color:#c9d4e4}
.label--check{letter-spacing:.2em;font-size:10px}
.label--check small{font-size:11px;color:var(--ink);letter-spacing:.02em}
.label--route .metrics{display:grid;grid-template-columns:auto auto;gap:1px 12px;margin-top:6px;font-size:10px;letter-spacing:.06em;text-transform:none;color:var(--muted)}
.label--route .metrics b{font-weight:500;color:var(--ink)}
.label--route .verdict{display:block;margin-top:6px;font-size:10px;letter-spacing:.24em}
.label--route.is-blocked{color:#8f8aa6}.label--route.is-blocked .verdict{color:var(--risk)}
.label--route.is-selected .verdict{color:var(--cyan)}

.tip{position:fixed;z-index:25;left:0;top:0;min-width:180px;max-width:260px;padding:12px 14px;border-radius:12px;background:rgba(7,12,26,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);pointer-events:none;font-size:12px;line-height:1.45;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.tip small{display:block;font-size:9px;letter-spacing:.28em;text-transform:uppercase}
.tip strong{display:block;font-weight:500;font-size:14px;margin:2px 0 6px}
.tip span{display:block;color:var(--muted)}

/* ---------- Scenes: tall scroll tracks with a sticky, mostly empty frame. */
main{position:relative;z-index:10}
.scene{position:relative;height:calc(var(--h,100)*1vh)}
.frame{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;pointer-events:none}
.frame a,.frame button{pointer-events:auto}
.still{display:none}
[data-in]{opacity:0;will-change:opacity,transform}

.cine{position:absolute;left:var(--gutter);right:var(--gutter);top:50%;margin:0;transform:translateY(-50%);text-align:center;font-weight:250;font-size:clamp(34px,6.2vw,96px);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance;text-shadow:0 0 40px rgba(5,10,22,.8)}
.cine::before,.scale-steps li::before,.caption::before,.lens-caption::before{content:'';position:absolute;inset:-60px -12%;z-index:-1;background:radial-gradient(closest-side,rgba(4,8,18,.72),rgba(4,8,18,0));pointer-events:none}
.cine{isolation:isolate}.scale-steps li,.caption,.lens-caption{isolation:isolate}
.cine--small{font-size:clamp(28px,4.2vw,64px)}
.eyebrow{margin:0 0 10px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}

.scene--hero{height:100vh;height:100svh}
.intro p{position:absolute;left:var(--gutter);right:var(--gutter);top:50%;margin:0;transform:translateY(-50%);text-align:center;font-weight:250;font-size:clamp(30px,5.4vw,84px);line-height:1.05;text-transform:uppercase;letter-spacing:-.005em;opacity:0;text-wrap:balance}
.intro-question{font-weight:300!important;letter-spacing:.02em!important}
.hero-title{position:absolute;left:var(--gutter);right:var(--gutter);top:62%;text-align:center}
.hero-title{isolation:isolate}
.hero-title::before{content:'';position:absolute;inset:-40px -6%;z-index:-1;background:radial-gradient(closest-side,rgba(3,6,14,.82),rgba(3,6,14,.5) 60%,rgba(3,6,14,0));pointer-events:none;transition:opacity 1.4s}
.intro-playing .hero-title::before{opacity:0}
.light .hero-title::before,.no-js .hero-title::before{display:none}
.intro-playing .hero-title>:not(.hero-logo){opacity:0}
.hero-title>*{transition:opacity 1.4s ease}
.intro-playing .hero-title *{pointer-events:none}
.hero-title h1{margin:0}
.hero-logo{position:fixed;left:0;top:0;width:min(46vw,760px);transform:translate(-50%,-50%);transform-origin:0 0;opacity:1;transition:opacity 1.6s ease;pointer-events:none}
.hero-logo img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,#000 var(--reveal,100%),transparent calc(var(--reveal,100%) + 1.5%));mask-image:linear-gradient(90deg,#000 var(--reveal,100%),transparent calc(var(--reveal,100%) + 1.5%))}
.intro-playing .hero-logo{opacity:0}
/* Until the world has placed it, the fixed logo would sit at the corner: keep it hidden while the page loads. */
.js:not(.webgl):not(.light) .hero-logo{opacity:0!important;visibility:hidden}
.hero-explain{margin:12px auto 0;max-width:620px;font-size:clamp(14px,1.1vw,16px);line-height:1.6;font-weight:300;color:#b4c0d2}
.tagline{margin:0;font-size:clamp(15px,1.5vw,20px);font-weight:300;color:#c9d3e2;letter-spacing:.02em}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.button{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;border:1px solid rgba(232,238,247,.25);text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:background .2s,border-color .2s}
.button:hover{border-color:rgba(232,238,247,.6);background:rgba(232,238,247,.05)}
.button--primary{background:var(--ink);color:#07101f;border-color:var(--ink)}
.button--primary:hover{background:#fff}

.scale-steps{list-style:none;margin:0;padding:0}
.scale-steps li{position:absolute;left:var(--gutter);bottom:clamp(48px,14vh,150px);max-width:520px}
.scale-steps strong{display:block;font-weight:250;font-size:clamp(30px,4.6vw,68px);line-height:1.02;text-transform:uppercase;letter-spacing:-.005em}
.scale-steps span{display:block;margin-top:12px;color:#c3cddc;font-size:16px}

.lens-intro{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.lens-intro .cine{position:static;transform:none}
.lens-rail{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:2px;opacity:0;transition:opacity .6s}
.lens-rail.is-on{opacity:1}
.lens-rail button{position:relative;background:none;border:0;padding:7px 18px 7px 0;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);cursor:pointer;transition:color .25s,letter-spacing .25s}
.lens-rail button::after{content:'';position:absolute;right:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;border:1px solid currentColor;transition:background .25s,transform .25s}
.lens-rail button:hover{color:var(--ink)}
.lens-rail button[aria-pressed=true]{color:var(--ink);letter-spacing:.34em}
.lens-rail button[aria-pressed=true]::after{background:currentColor;transform:scale(1.25)}
.lens-caption{position:absolute;left:var(--gutter);bottom:clamp(40px,11vh,120px);max-width:min(560px,calc(100vw - 2*var(--gutter)))}
.lens-caption>p{position:absolute;left:0;bottom:0;width:min(560px,calc(100vw - 2*var(--gutter)));margin:0;font-size:clamp(17px,1.5vw,21px);font-weight:300;color:#d7dfeb;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
.lens-caption>p.is-on{opacity:1;transform:none}
.lens-caption>p>span:first-child{text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:500;margin-right:10px}
#cost-total{font-weight:300;font-size:1.5em;font-variant-numeric:tabular-nums;color:var(--ink)}
.cost-note{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.scenarios{position:absolute;left:var(--gutter);bottom:clamp(40px,11vh,120px);display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;max-width:calc(100vw - 2*var(--gutter))}
.scenarios .eyebrow{margin:0 6px 0 0}
.scenarios button{background:none;border:0;padding:8px 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);cursor:pointer;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.scenarios button:hover{color:var(--ink)}
.scenarios button[aria-pressed=true]{color:var(--violet);border-bottom-color:currentColor}
.product-cta{position:absolute;right:var(--gutter);bottom:clamp(40px,11vh,120px);text-align:right}
.product-cta .button{border-color:rgba(148,112,245,.55);color:#e3d8ff}
.product-cta .button:hover{background:rgba(148,112,245,.1);border-color:var(--violet)}
.lens-caption .more{display:block;margin-top:6px;font-size:15px;color:var(--muted);line-height:1.5}
.lens-head{position:absolute;left:var(--gutter);top:clamp(96px,16vh,170px);max-width:540px;isolation:isolate}
.lens-head::before,.imp-lede::before,.scenario-copy::before{content:'';position:absolute;inset:-50px -14%;z-index:-1;background:radial-gradient(closest-side,rgba(4,8,18,.7),rgba(4,8,18,0));pointer-events:none}
.lens-head h2{margin:0;font-weight:250;font-size:clamp(26px,2.8vw,42px);line-height:1.08;text-transform:uppercase;letter-spacing:-.005em}
.lens-head p:last-child{margin:14px 0 0;color:#c3cddc;font-size:15px}
.imp-lede{position:absolute;left:var(--gutter);top:clamp(96px,16vh,170px);max-width:420px;isolation:isolate}
.imp-lede p:last-child{margin:0;color:#c9d3e2;font-size:16px;font-weight:300}
.scenario-copy{position:absolute;left:var(--gutter);bottom:calc(clamp(40px,11vh,120px) + 52px);width:min(500px,calc(100vw - 2*var(--gutter)));isolation:isolate}
.scenario-copy p{position:absolute;left:0;bottom:0;margin:0;font-size:15px;color:#c3cddc;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.scenario-copy p.is-on{opacity:1;transform:none}
.scenario-copy b{display:block;margin-bottom:4px;font-weight:500;color:var(--ink);font-size:16px}
.product-cta-copy{margin:0 0 14px;max-width:280px;margin-left:auto;color:#c3cddc;font-size:15px}

/* ---------- After the film: the written part. */
.platform{position:relative;z-index:10;padding:clamp(90px,14vh,160px) var(--gutter) 40px;background:linear-gradient(rgba(3,6,14,0),rgba(3,6,14,.9) 180px,rgba(3,6,14,.96))}
.platform-inner{max-width:1180px;margin:0 auto}
.platform h2{margin:0;font-weight:250;font-size:clamp(32px,4.4vw,64px);line-height:1.04;text-transform:uppercase;letter-spacing:-.01em;max-width:900px;text-wrap:balance}
.platform-lede{margin:26px 0 0;max-width:720px;font-size:clamp(17px,1.4vw,20px);font-weight:300;color:#c9d3e2;line-height:1.6}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(56px,9vh,96px)}
.pillar{padding-top:22px;border-top:1px solid var(--line)}
.pillar--imperium{border-top-color:rgba(148,112,245,.5)}.pillar--otopia{border-top-color:rgba(226,174,94,.5)}.pillar--observatory{border-top-color:rgba(88,220,248,.5)}
.pillar svg{display:block;width:120px;height:64px;margin-bottom:18px}
.pillar h3{margin:0;font-weight:400;font-size:26px;letter-spacing:.01em}
.pillar-line{margin:6px 0 14px;color:var(--ink);font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:300}
.pillar p:not(.eyebrow):not(.pillar-line){color:#aeb9ca;font-size:15px;line-height:1.65}
.pillar .eyebrow{margin-bottom:6px}
.more-link{display:inline-block;margin-top:6px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.more-link:hover{text-decoration:underline;text-underline-offset:4px}
.pv-beam--pillar{transform-origin:60px 22px}
.platform-split{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(28px,5vw,80px);margin-top:clamp(72px,12vh,130px);padding-top:32px;border-top:1px solid var(--line)}
.platform-split h3{margin:0;font-weight:250;font-size:clamp(26px,2.8vw,40px);line-height:1.1;text-transform:uppercase}
.platform-split p:not(.eyebrow){margin:0 0 16px;color:#c3cddc;font-size:17px;font-weight:300;line-height:1.65}
.platform-close{margin-top:clamp(80px,14vh,150px);text-align:center}
.platform-next{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:clamp(56px,9vh,90px) 0 0;color:var(--muted);font-size:14px}
.platform{padding-bottom:clamp(80px,14vh,140px)}
.platform--close{background:rgba(3,6,14,.96);padding-top:0}
.platform--close .platform-close{margin-top:0;padding-top:clamp(60px,10vh,120px)}
.platform-close h2{margin:0 auto}
.platform-close p{margin:18px auto 0;max-width:560px;color:#c3cddc;font-size:18px;font-weight:300}
.label--capsule{font-size:10px;letter-spacing:.26em}
.label--capsule small{font-size:13px;letter-spacing:.02em;color:var(--ink)}
.label--capsule.is-warn{color:var(--gold)}.label--capsule.is-deny{color:var(--risk)}
.label--verdict{font-size:clamp(13px,1.2vw,16px);letter-spacing:.3em;font-weight:500}

.footer{position:relative;z-index:10;display:grid;gap:24px;padding:80px var(--gutter) 40px;background:rgba(3,6,14,.96);font-size:13px;color:var(--muted)}
.footer-mark{display:flex;align-items:center;gap:14px}
.footer-mark svg{width:28px;height:28px}
.footer-mark p{margin:0;letter-spacing:.3em;font-weight:600;color:var(--ink);font-size:12px}
.footer-mark span{font-weight:400;letter-spacing:.02em;color:var(--muted);font-size:13px}
.footer nav{display:flex;flex-wrap:wrap;gap:10px 26px}
.footer nav a{text-decoration:none}.footer nav a:hover{color:var(--ink)}
.footer-note{margin:0;font-size:12px;color:var(--faint)}

.controls{position:fixed;left:var(--gutter);bottom:18px;z-index:28;display:flex;gap:6px;align-items:center}
.controls button,.controls select{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(5,10,22,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.controls button:hover,.controls select:hover{color:var(--ink);border-color:rgba(232,238,247,.3)}
.controls select{appearance:none;-webkit-appearance:none;padding-right:12px}
.controls option{background:#0b1222;text-transform:none}
.motion-toggle{position:fixed;right:var(--gutter);bottom:18px;z-index:28;height:30px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(5,10,22,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.motion-toggle:hover,.motion-toggle:focus-visible{color:var(--ink);border-color:rgba(232,238,247,.3)}
.no-js .motion-toggle{display:none}
.site-toggles{position:fixed;right:var(--gutter);bottom:18px;z-index:28;display:flex;gap:8px}
.site-toggles .motion-toggle{position:static}
.sound-toggle{height:30px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(5,10,22,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.sound-toggle:hover,.sound-toggle:focus-visible{color:var(--ink);border-color:rgba(232,238,247,.3)}
.sound-toggle[aria-pressed=true]{color:var(--gold);border-color:rgba(226,174,94,.5)}
.no-js .sound-toggle{display:none}
.brand{transition:opacity .25s}
.hero-brand .nav .brand{opacity:0;pointer-events:none}
.no-js .nav .brand{opacity:1}

/* Product quick links: only in the still-frame hero, where nothing moves to carry the eye. */
.hero-pillars{display:none;list-style:none;margin:0;padding:0}
.light .hero-pillars,.no-js .hero-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);max-width:680px}
.hero-pillars a{display:block;text-decoration:none}
.hero-pillars b{font-weight:500;font-size:15px;letter-spacing:.02em}
.hero-pillars span{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.45}
.hero-pillars a:hover b{text-decoration:underline;text-underline-offset:4px}
.dot{display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;vertical-align:2px}
.dot--violet{background:var(--violet);box-shadow:0 0 10px var(--violet)}.dot--gold{background:var(--gold);box-shadow:0 0 10px var(--gold)}.dot--cyan{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}

/* ---------- Light: the same story told in still frames. Also the no-JavaScript layout. */
.light #world,.no-js #world,.light .labels,.no-js .labels{display:none}
.light .scene,.no-js .scene{height:auto}
.light .frame,.no-js .frame{isolation:isolate;position:relative;height:auto;min-height:100svh;padding:120px var(--gutter) 80px;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;pointer-events:auto}
.light .still,.no-js .still{display:block;position:absolute;inset:0;z-index:-1}
.still img{display:block;width:100%;height:100%;object-fit:cover;opacity:.85}
.light .frame::after,.no-js .frame::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 40%,rgba(5,10,22,.85))}
.light [data-in],.no-js [data-in]{opacity:1!important;transform:none!important}
.light .cine,.no-js .cine,.light .scale-steps li,.no-js .scale-steps li,.light .lens-caption,.no-js .lens-caption,.light .lens-rail,.no-js .lens-rail,.light .hero-title,.no-js .hero-title{position:static;transform:none;inset:auto}
.light .cine,.no-js .cine{text-align:left}
.light .intro,.no-js .intro{display:none}
.light .scale-steps,.no-js .scale-steps{display:grid;gap:26px}
.light .scale-steps strong,.no-js .scale-steps strong{font-size:clamp(24px,3vw,40px)}
.light .lens-rail,.no-js .lens-rail{opacity:1;flex-direction:row;flex-wrap:wrap;align-items:center}
.light .lens-caption>p,.no-js .lens-caption>p{position:static;opacity:1;transform:none;margin-top:12px}
.light .lens-caption>p:not(.is-on){display:none}
.light .scenarios,.no-js .scenarios,.light .product-cta,.no-js .product-cta{position:static;text-align:left}
.light .scenarios{display:none}
.light .lens-head,.no-js .lens-head,.light .imp-lede,.no-js .imp-lede,.light .scenario-copy,.no-js .scenario-copy{position:static;width:auto}
.light .scenario-copy p,.no-js .scenario-copy p{position:static;opacity:1;transform:none;margin-bottom:14px}
.light .scenario-copy p:not(.is-on){display:none}
.no-js .lens-caption .more{display:block}
.no-js .lens-rail{display:none}
.light .hero-title,.no-js .hero-title{text-align:left}
.light .hero-logo,.no-js .hero-logo{position:static;transform:none;width:min(620px,80vw);margin-bottom:14px;filter:none}
.light .hero-logo img,.no-js .hero-logo img{-webkit-mask-image:none;mask-image:none}
.light .cta,.no-js .cta{justify-content:flex-start}
/* Still-frame hero: one left column, vertically centred, the organization visible on the right. */
.light .scene--hero .frame,.no-js .scene--hero .frame{justify-content:center;padding-top:110px;padding-bottom:70px}
.light .scene--hero .hero-title,.no-js .scene--hero .hero-title{max-width:680px}
.light .hero-logo,.no-js .hero-logo{width:min(460px,78vw)!important;margin-bottom:22px}
.light .tagline,.no-js .tagline{font-size:clamp(18px,1.7vw,24px);color:var(--ink)}
.light .hero-explain,.no-js .hero-explain{margin:14px 0 0;max-width:580px;font-size:16px}
.light .scene--hero .still img,.no-js .scene--hero .still img{opacity:1;object-position:65% 55%}
.light .scene--hero .frame::after,.no-js .scene--hero .frame::after{background:linear-gradient(90deg,rgba(3,6,14,.94) 0%,rgba(3,6,14,.78) 38%,rgba(3,6,14,.2) 72%,rgba(3,6,14,.05) 100%)}
.no-js .controls{display:none}

@media (max-width:900px){
  #menu{position:fixed;inset:68px 0 auto;flex-direction:column;align-items:flex-start;gap:4px;padding:16px var(--gutter) 28px;background:rgba(5,10,22,.96);border-bottom:1px solid var(--line);display:none}
  #menu.is-open{display:flex}
  #menu>a{font-size:17px;padding:10px 0;color:var(--ink)}
  .preview{display:none}
  .demo{margin-left:auto;padding:8px 12px;font-size:10px}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;background:none;border:0;padding:10px;cursor:pointer}
  .menu-toggle span{display:block;height:1px;background:var(--ink)}
  .nav{gap:12px}
}
@media (max-width:760px){
  .hero-explain{font-size:14px;line-height:1.55;margin-top:10px}
  .scene--hero .cta{margin-top:20px}
  .scene--hero .cta .button:not(.button--primary){display:none}
  .site-toggles{bottom:12px;gap:6px}
  .site-toggles button{height:26px;padding:0 10px;font-size:9px;letter-spacing:.14em}
  .lens-rail{top:auto;bottom:18px;right:0;left:0;transform:none;flex-direction:row;overflow-x:auto;gap:0;padding:0 var(--gutter);scrollbar-width:none;justify-content:flex-start}
  .lens-rail::-webkit-scrollbar{display:none}
  .lens-rail button{padding:12px 12px;font-size:10px;flex:none}
  .lens-rail button::after{display:none}
  .lens-rail button[aria-pressed=true]{letter-spacing:.26em;color:var(--gold)}
  .lens-caption{bottom:84px}
  .scenarios{bottom:22px;gap:0 12px}.scenarios .eyebrow{display:none}.scenarios button{font-size:10px}
  .product-cta{bottom:auto;top:84px}
  .label small{display:none}
  .label--route .metrics{display:none}
  .scale-steps span{font-size:15px}
  .lens-head{top:84px;max-width:none;right:var(--gutter)}.lens-head p:last-child{display:none}
  .lens-caption .more{font-size:14px}
  .imp-lede{top:84px;right:var(--gutter)}.imp-lede p:last-child{font-size:15px}
  .scenario-copy{bottom:104px}.scenario-copy p{font-size:14px}.scenario-copy b{font-size:15px}
  .product-cta-copy{display:none}
  .pillars,.platform-split{grid-template-columns:1fr}
  .light .hero-pillars,.no-js .hero-pillars{grid-template-columns:1fr;gap:16px}
  .light .scene--hero .frame::after,.no-js .scene--hero .frame::after{background:linear-gradient(rgba(3,6,14,.35),rgba(3,6,14,.88) 45%,rgba(3,6,14,.95))}
}
@media (max-width:1100px) and (min-width:761px){.pillars{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){
  .pv-branch,.pv-beam{animation:none}
  .hero-title,.lens-caption>div,.nav{transition:none}
}

/* Login (to the support portal) and the mobile-menu copy of it. */
.login{font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--muted);height:40px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--line);border-radius:999px;transition:color .2s,border-color .2s}
.login:hover,.login:focus-visible{color:var(--ink);border-color:rgba(232,238,247,.35)}
#menu>a.menu-only{display:none}
@media (max-width:640px){ .login{display:none} #menu>a.menu-only{display:block} }