/* assets/production-map-preview.css */
@charset "utf-8";

.uplm-stage { position: absolute; inset: 0px; overflow: hidden; pointer-events: none; }

.uplm-map { position: absolute; left: 50%; top: 44%; width: max(100%, 215vh); aspect-ratio: 2800 / 1300; transform: translate(-50%, -50%); background: url("6ac2af04c9e7cc4f14448401_upload-global-map-v2.webp") center center / 100% 100% no-repeat; animation: 40s ease-in-out 0s infinite alternate none running uplmDrift; }

@keyframes uplmDrift { 
  0% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-49%, -50.5%) scale(1.04); }
}

.uplm-h { position: absolute; width: 0px; height: 0px; }

.uplm-h i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: rgb(255, 154, 60); box-shadow: rgba(255, 138, 40, 0.7) 0px 0px 12px 3px; }

.uplm-h b { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(255, 150, 60, 0.8); animation: 2.6s ease-out 0s infinite normal none running uplmPulse; }

@keyframes uplmPulse { 
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.uplm-h u { position: absolute; left: -1px; bottom: 0px; width: 2px; height: 180px; transform-origin: center bottom; background: linear-gradient(0deg, rgba(255, 154, 60, 0.9), rgba(255, 154, 60, 0)); opacity: 0; animation: 7.2s ease-out 0s infinite normal none running uplmBeam; }

@keyframes uplmBeam { 
  0% { transform: scaleY(0); opacity: 1; }
  15% { transform: scaleY(0.8); opacity: 0.9; }
  25% { transform: scaleY(1); opacity: 0; }
  100% { opacity: 0; }
}

.uplm-t { position: absolute; transform: translate(14px, -50%); white-space: nowrap; padding: 8px 12px; border-radius: 10px; background: rgba(40, 40, 40, 0.85); border: 1px solid rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); font-size:.92rem; line-height: 1.25; opacity: 0; animation: 12s ease 0s infinite normal none running uplmTip; }

.uplm-t span { display: block; color: rgba(255, 255, 255, 0.55); font-size:.82rem; }

@keyframes uplmTip { 
  0%, 2% { opacity: 0; }
  4%, 14% { opacity: 1; }
  16%, 100% { opacity: 0; }
}
/* Integration wrapper; original visual pulses use CSS only, with no counter code. */
.production-map-preview{position:relative;width:100%;height:620px;overflow:hidden;background:#09090b;isolation:isolate}
@media(max-width:767px){.production-map-preview{height:440px}}
@media(prefers-reduced-motion:reduce){.production-map-preview *{animation:none!important}.production-map-preview .uplm-h b,.production-map-preview .uplm-h u{display:none}}

/* assets/production-app-preview.css */
@charset "utf-8";

.ux3 { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 36px; width: 100%; max-width: 1020px; margin: 72px auto 0px; font-family: inherit; -webkit-font-smoothing: antialiased; }

.ux3-c { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.ux3-f { position: relative; width: 100%; max-width: 300px; aspect-ratio: 9 / 19.3; border-radius: 50px; padding: 9px; background: linear-gradient(145deg, rgb(74, 74, 79), rgb(28, 28, 31) 30%, rgb(44, 44, 48) 70%, rgb(90, 90, 96)); box-shadow: rgba(255, 255, 255, 0.18) 0px 0px 0px 1px inset, rgba(199, 71, 12, 0.55) 0px 50px 90px -40px, rgb(0, 0, 0) 0px 0px 0px 1px; }

.ux3-f::before, .ux3-f::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: rgb(58, 58, 62); }

.ux3-f::before { left: -3px; top: 22%; height: 9%; }

.ux3-f::after { right: -3px; top: 28%; height: 14%; }

.ux3-s { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: rgb(245, 244, 241); color: rgb(17, 17, 17); display: flex; flex-direction: column; font-size: 11px; }

.ux3-d { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 31%; height: 24px; border-radius: 20px; background: rgb(0, 0, 0); z-index: 5; }

.ux3-sb { display: flex; justify-content: space-between; align-items: center; padding: 15px 24px 0px 26px; height: 34px; font-size: 12px; font-weight: 600; position: relative; z-index: 4; }

.ux3-sb i { display: flex; gap: 4px; align-items: center; }

.ux3 svg { display: block; }

.ux3-b { flex: 1 1 0%; padding: 10px 14px 0px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }

.ux3-top { display: flex; justify-content: space-between; align-items: center; }

.ux3-hi { font-size: 10px; color: rgb(139, 138, 133); }

.ux3-nm { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }

.ux3-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, rgb(255, 173, 86), rgb(199, 71, 12)); }

.ux3-chips { display: flex; gap: 6px; }

.ux3-chips span { padding: 5px 10px; border-radius: 99px; background: rgb(255, 255, 255); border: 1px solid rgb(235, 233, 228); font-size: 10px; color: rgb(85, 84, 79); }

.ux3-chips span:first-child { background: rgb(17, 17, 17); color: rgb(255, 255, 255); border-color: rgb(17, 17, 17); }

.ux3-ft { position: relative; height: 138px; border-radius: 20px; overflow: hidden; background: center center / cover rgb(51, 51, 51); color: rgb(255, 255, 255); padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }

.ux3-ft::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.8)); }

.ux3-ft > * { position: relative; }

.ux3-row1 { display: flex; justify-content: space-between; }

.ux3-tag { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); padding: 4px 8px; border-radius: 99px; }

.ux3-pay { background: rgb(238, 90, 26); font-weight: 700; padding: 4px 9px; border-radius: 99px; font-size: 11px; }

.ux3-ftt { font-size: 15px; font-weight: 600; }

.ux3-ftm { font-size: 10px; opacity: 0.75; margin-top: 2px; }

.ux3-li { display: flex; gap: 10px; align-items: center; background: rgb(255, 255, 255); border-radius: 16px; padding: 7px 10px 7px 7px; }

.ux3-th { width: 40px; height: 40px; border-radius: 11px; background: center center / cover rgb(204, 204, 204); flex: 0 0 auto; }

.ux3-lt { flex: 1 1 0%; min-width: 0px; }

.ux3-lt b { display: block; font-size: 12px; font-weight: 600; }

.ux3-lt span { font-size: 10px; color: rgb(139, 138, 133); }

.ux3-pr { font-size: 12px; font-weight: 700; color: rgb(238, 90, 26); }

.ux3-tb { display: flex; justify-content: space-around; padding: 8px 8px 20px; background: rgba(255, 255, 255, 0.92); border-top: 1px solid rgb(236, 235, 230); font-size: 9px; color: rgb(163, 162, 156); }

.ux3-tb span { display: flex; flex-direction: column; align-items: center; gap: 3px; }

.ux3-tb .on { color: rgb(238, 90, 26); }

.ux3-dk { background: rgb(11, 11, 11); color: rgb(255, 255, 255); }

.ux3-vf { position: relative; height: 47%; margin-top: -34px; background: center center / cover rgb(34, 34, 34); }

.ux3-vf::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgb(11, 11, 11)); }

.ux3-rec { position: absolute; left: 14px; top: 46px; z-index: 2; display: flex; gap: 6px; align-items: center; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); padding: 5px 9px; border-radius: 99px; font-weight: 600; font-variant-numeric: tabular-nums; }

.ux3-dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(255, 59, 48); animation: 1.4s ease 0s infinite normal none running ux3b; }

@keyframes ux3b { 
  50% { opacity: 0.25; }
}

.ux3-br { position: absolute; inset: 44% 18% 14% 30%; z-index: 2; background: linear-gradient(rgb(255, 138, 40), rgb(255, 138, 40)) 0px 0px / 14px 2px no-repeat, linear-gradient(rgb(255, 138, 40), rgb(255, 138, 40)) 0px 0px / 2px 14px, linear-gradient(rgb(255, 138, 40), rgb(255, 138, 40)) 100% 0px / 14px 2px, linear-gradient(rgb(255, 138, 40), rgb(255, 138, 40)) 100% 0px / 2px 14px, linear-gradient(rgb(255, 138, 40), rgb(255, 138, 40)) 0px 100% / 14px 2px, linear-gradient(rgb(255, 138, 40), rgb(255, 138, 40)) 0px 100% / 2px 14px, linear-gradient(rgb(255, 138, 40), rgb(255, 138, 40)) 100% 100% / 14px 2px, linear-gradient(rgb(255, 138, 40), rgb(255, 138, 40)) 100% 100% / 2px 14px; }

.ux3-br span { position: absolute; left: 0px; top: -20px; font-size: 9px; font-weight: 600; background: rgb(255, 138, 40); color: rgb(17, 17, 17); padding: 2px 6px; border-radius: 4px; }

.ux3-card { background: rgb(26, 26, 26); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }

.ux3-ck { display: flex; gap: 8px; align-items: center; color: rgb(216, 216, 216); }

.ux3-ck svg { color: rgb(126, 224, 138); flex: 0 0 auto; }

.ux3-up { display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.6); font-size: 10px; }

.ux3-bar { height: 5px; border-radius: 9px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }

.ux3-bar i { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, rgb(255, 173, 86), rgb(238, 90, 26)); animation: 6s ease-in-out 0s infinite alternate none running ux3p; }

@keyframes ux3p { 
  0% { width: 38%; }
  100% { width: 86%; }
}

.ux3-stop { margin: auto auto 22px; width: 58px; height: 58px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; }

.ux3-stop i { width: 20px; height: 20px; border-radius: 5px; background: rgb(255, 59, 48); }

.ux3-bal { position: relative; border-radius: 20px; padding: 14px; color: rgb(255, 255, 255); background: rgb(20, 20, 20); overflow: hidden; }

.ux3-bal::before { content: ""; position: absolute; right: -40px; top: -50px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 138, 40, 0.55), rgba(255, 138, 40, 0) 70%); }

.ux3-bal > * { position: relative; }

.ux3-bal small { font-size: 10px; opacity: 0.6; }

.ux3-amt { font-size: 32px; font-weight: 300; letter-spacing: -0.03em; margin: 2px 0px 10px; }

.ux3-bt { display: flex; justify-content: space-between; align-items: center; }

.ux3-bt span { font-size: 10px; opacity: 0.6; }

.ux3-bt b { background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-size: 11px; padding: 6px 12px; border-radius: 99px; }

.ux3-ch { background: rgb(255, 255, 255); border-radius: 16px; padding: 10px 12px; }

.ux3-ch > div { display: flex; align-items: flex-end; gap: 7px; height: 64px; margin-top: 6px; }

.ux3-ch > div i { flex: 1 1 0%; border-radius: 4px; background: rgb(240, 236, 230); transform-origin: center bottom; animation: 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal both running ux3g; }

.ux3-ch > div i:last-child { background: linear-gradient(rgb(255, 173, 86), rgb(238, 90, 26)); }

@keyframes ux3g { 
  0% { transform: scaleY(0); }
}

.ux3-ch p { display: flex; justify-content: space-between; margin: 4px 0px 0px; font-size: 9px; color: rgb(163, 162, 156); }

.ux3-ic { width: 30px; height: 30px; border-radius: 10px; background: rgb(255, 243, 234); color: rgb(238, 90, 26); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.ux3-g { color: rgb(26, 158, 75); font-weight: 600; font-size: 12px; }

.ux3-cap { color: rgba(255, 255, 255, 0.62); font-size: 15px; text-align: center; }

@media (max-width: 767px) {
  .ux3 { grid-template-columns: 1fr; max-width: 300px; }
}
/* Isolate production icon geometry from the V3 page-wide SVG defaults. */
.ux3 svg[height="11"]{height:11px}
.ux3 svg[height="12"]{height:12px}
.ux3 svg[height="15"]{height:15px}
.ux3 svg[height="16"]{height:16px}
.ux3 svg[height="20"]{height:20px}
.ux3 svg[width="15"]{width:15px}
.ux3 svg[width="16"]{width:16px}
.ux3 svg[width="17"]{width:17px}
.ux3 svg[width="20"]{width:20px}
.ux3 svg[width="26"]{width:26px}

@media(prefers-reduced-motion:reduce){.ux3 *,.ux3 *::before,.ux3 *::after{animation:none!important}}

/* styles.css */
@font-face{font-family:Manrope;src:url('6adfa5dff70a987673fe5ccf_mu-manrope-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Manrope;src:url('6adfa5df4505005406eafe88_mu-manrope-500.woff2') format('woff2');font-weight:500;font-display:swap}@font-face{font-family:Manrope;src:url('6adfa5dff9843e0885e25a47_mu-manrope-700.woff2') format('woff2');font-weight:700;font-display:swap}
[hidden]{display:none!important}
:root{--bg:#050505;--fg:#f6f5f2;--muted:#8c8b88;--line:rgba(255,255,255,.16);--accent:#ff913d;--ease:cubic-bezier(.22,1,.36,1);--page:clamp(22px,4.2vw,84px)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.5 Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}body.dialog-open{overflow:hidden}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #ffb47a;outline-offset:5px}img{display:block;max-width:100%}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400;line-height:1.08;letter-spacing:-.052em}h2{font-size:clamp(42px,5.8vw,86px)}button{color:inherit}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.container{width:calc(100% - var(--page)*2);max-width:1720px;margin-inline:auto}.skip-link{position:fixed;top:-60px;left:20px;z-index:100;padding:12px;background:white;color:black}.skip-link:focus{top:15px}.section-label{display:flex;justify-content:space-between;gap:16px;font-size:.82rem;letter-spacing:.035em;color:var(--muted)}.section-label i,.network-stats i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:9px;vertical-align:middle}.source-note{font-size:.72rem;color:#817e78;line-height:1.5}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;border:1px solid transparent;border-radius:99px;padding:13px 20px;min-height:48px;white-space:nowrap;font-size:.92rem;line-height:1.2;transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease)}.button-primary{background:#f5f4f0;color:#141414;border-color:#f5f4f0}.button-primary:hover{background:white;box-shadow:0 0 28px #fff2;transform:translateY(-2px)}.button-secondary{background:rgba(255,255,255,.035);border-color:#ffffff36;color:#f0efec}.button-secondary:hover{background:#ffffff10;border-color:#ffffff80;transform:translateY(-2px)}.button-icon{display:flex;overflow:hidden}.button-icon svg{width:16px;height:16px;transition:transform .45s var(--ease)}.button:hover .button-icon svg{transform:translate(2px,-2px)}.cta-pair{display:flex;gap:12px;align-items:center}.reading-progress{height:1px;position:absolute;left:0;bottom:-1px;width:0;background:var(--accent);opacity:.6}
.hero{height:min(100svh,1100px);min-height:680px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate}.hero-light{position:absolute;z-index:-2;inset:-35% -12% 5%;background:radial-gradient(ellipse at 48% 15%,#dbd6a3 0,#dba259 21%,#d07a2c 38%,#7b3612 51%,#261006 63%,transparent 76%);filter:blur(28px);transform:translateY(var(--hero-shift,0px));animation:light-breathe 14s ease-in-out infinite alternate}.hero-grain{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#050505 0,transparent 42%);pointer-events:none}.hero-content{width:100%;padding:55px 24px 95px;position:relative;transform:translateY(var(--hero-content-shift,0px));opacity:var(--hero-opacity,1)}.upload-logo{margin:0 auto 30px;width:86px;height:auto}.hero h1{font-size:clamp(54px,6.4vw,108px);line-height:1.02;letter-spacing:-.055em}.hero .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}.hero .line>span{display:block;animation:line-in 1.2s var(--ease) both}.hero .line:nth-child(2)>span{animation-delay:.1s}.hero p{color:#eee9df;font-size:clamp(14px,1.15vw,18px);line-height:1.7;margin:30px auto 27px;animation:fade-in 1.2s .2s both}.hero-actions{justify-content:center;animation:fade-in 1.2s .35s both}.hero-actions .button-secondary{backdrop-filter:blur(10px)}.scroll-cue{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);display:flex;gap:18px;align-items:center;color:#a6a19a;font-size:.78rem}.scroll-track{height:31px;width:1px;background:#ffffff26;position:relative;overflow:hidden}.scroll-track:after{content:'';position:absolute;top:-100%;width:1px;height:100%;background:#e6ad7d;animation:scroll-cue 2.6s ease-in-out infinite}.hero-bottom-label{position:absolute;bottom:27px;left:var(--page);font-size:.72rem;color:#65615b;letter-spacing:.04em}@keyframes light-breathe{to{filter:blur(38px) brightness(1.13)}}@keyframes line-in{from{transform:translateY(110%)}to{transform:translateY(0)}}@keyframes fade-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes scroll-cue{to{top:140%}}
.network-section{position:relative;min-height:780px;height:100svh;max-height:1100px;overflow:hidden;background:#050505;isolation:isolate}.network-top{position:absolute;top:40px;left:var(--page);right:var(--page);z-index:2}.map-field{position:absolute;inset:-7% -4% 0;transform:translate3d(0,var(--map-y,0px),0) scale(var(--map-scale,1.08));will-change:transform;pointer-events:none}.production-map-preview{height:100%;width:100%;background:#050505;position:absolute;inset:0}.uplm-stage{overflow:visible}.uplm-map{top:46%;width:max(112%,170vh);opacity:.95;animation:none;filter:contrast(1.14) brightness(.95)}.uplm-h i{width:5px;height:5px;left:-2.5px;top:-2.5px}.uplm-h b{border-width:1px}.uplm-h u{height:100px;opacity:.4}.map-field:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#050505 2%,#050505ed 11%,#0505053b 30%,transparent 55%,#050505 100%);pointer-events:none}.map-latitudes{position:absolute;inset:18% 0 20%;background:repeating-linear-gradient(0deg,transparent 0,transparent calc(25% - 1px),#ffffff04 25%);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}.network-bottom{position:absolute;bottom:80px;left:var(--page);right:var(--page);display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:end}.network-copy h2{font-size:clamp(27px,2.7vw,44px);line-height:1.14;letter-spacing:-.04em}.network-copy p{margin-top:22px;color:#8c8b88;font-size:.97rem;max-width:32ch}.network-stats{display:flex;justify-content:flex-end;gap:clamp(35px,5vw,90px)}.network-stats>div>span{display:block;color:#aaa7a2;font-size:.82rem;white-space:nowrap}.network-stats strong{font-size:clamp(48px,5.8vw,100px);font-weight:400;line-height:1.2;letter-spacing:-.065em;display:block;margin-top:12px;white-space:nowrap;font-variant-numeric:tabular-nums}.network-stats strong span{color:var(--accent);font-size:.25em;vertical-align:top;margin-left:4px;position:relative;top:.3em;letter-spacing:0}.network-ui>.source-note{position:absolute;left:var(--page);bottom:32px}
.diversity-section{padding:80px 0 66px;overflow:hidden;position:relative}.diversity-heading{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-top:50px;margin-bottom:65px}.diversity-heading p{max-width:33ch;font-size:1.05rem;color:#989691;line-height:1.7;padding-bottom:7px}.scene-window{overflow:hidden;position:relative;padding-top:36px;margin-top:-36px}.scene-rail{display:flex;gap:18px;padding:0 var(--page) 20px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-behavior:smooth}.scene-rail::-webkit-scrollbar{display:none}.scene-card{border:0;padding:0;flex:0 0 29%;min-width:260px;max-width:470px;text-align:left;background:none;scroll-snap-align:center;position:relative}.scene-card:nth-child(even){margin-top:42px}.scene-image{position:relative;overflow:hidden;aspect-ratio:1.05;background:#171513;border-radius:2px}.scene-image:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#0005,transparent 60%)}.scene-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) brightness(.84);transform:scale(1.06) translateY(var(--scene-y,0px));transition:filter .45s var(--ease), scale .9s var(--ease)}.scene-card:hover .scene-image img{filter:saturate(.9) brightness(1);scale:1.03}.scene-open{position:absolute;right:16px;top:16px;width:35px;height:35px;border:1px solid #ffffff60;border-radius:50%;display:grid;place-items:center;z-index:2;background:#1114;backdrop-filter:blur(10px);transition:transform .3s var(--ease)}.scene-card:hover .scene-open{transform:rotate(45deg)}.scene-index{position:absolute;bottom:20px;left:20px;font-size:.78rem;z-index:2;color:#eeebe6}.scene-title{display:block;margin-top:18px;font-size:1.05rem;color:#e0ddd7}.scene-meta{display:block;margin-top:7px;color:#6f6c67;font-size:.78rem}.scene-meta span{margin:0 8px;color:#c7824f}.gallery-foot{display:flex;justify-content:space-between;align-items:center;margin-top:25px;color:#76736e;font-size:.82rem}.gallery-controls{display:flex;gap:8px}.gallery-controls button{border:1px solid #ffffff29;border-radius:50%;width:38px;height:38px;background:none;transition:background .3s var(--ease)}.gallery-controls button:hover{background:#ffffff15}.diversity-section>.source-note{margin:25px var(--page) 0}.quality-statement>span:first-child{color:#f1eee8}.pipeline-visual>img{width:100%;height:100%;object-fit:cover;object-position:center 58%;transition:filter .9s var(--ease), transform 1.4s var(--ease);filter:saturate(.55) brightness(.68);transform:scale(1.01)}.pipeline-visual[data-stage="1"]>img{filter:saturate(.65) brightness(.65);transform:scale(1.035)}.pipeline-visual[data-stage="2"]>img{filter:saturate(.7) brightness(.7);transform:scale(1.07)}.pipeline-visual:after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,#0009,transparent 45%,#0005)}.media-top{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;z-index:2;font-size:.72rem;color:#e4ded5}.media-top i{width:5px;height:5px;display:inline-block;background:#f29a5d;border-radius:50%;margin-right:6px}.media-note{position:absolute;left:20px;bottom:15px;font-size:.68rem;color:#b9b3aa;z-index:4}.scanline{position:absolute;left:0;right:0;top:0;height:1px;background:#f4ac71;box-shadow:0 0 35px 7px #ff9e493d;opacity:0;z-index:2}.pipeline-visual[data-stage="1"] .scanline{opacity:.7;animation:scan 3.5s ease-in-out infinite}.annotation-box{position:absolute;border:1px solid #ffa762;z-index:2;opacity:0;transition:opacity .45s var(--ease), transform .6s var(--ease)}.annotation-box>span{position:absolute;top:-20px;left:-1px;background:#eea064;color:#1b130b;font-size:.68rem;padding:3px 7px;white-space:nowrap}.annotation-box.hand{left:34%;top:43%;width:25%;height:30%;transform:translate(-10px,5px)}.annotation-box.object{left:55%;top:44%;width:18%;height:27%;transform:translate(15px,0)}.pipeline-visual[data-stage="2"] .annotation-box{opacity:1;transform:none}.delivery-sheet{position:absolute;inset:0;background:#131310f2;z-index:3;padding:38px;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(20px);transition:opacity .45s var(--ease), transform .45s var(--ease);pointer-events:none}.pipeline-visual[data-stage="3"] .delivery-sheet{opacity:1;transform:none}.delivery-eyebrow{font-size:.72rem;color:#c38d60}.delivery-sheet strong{font-size:clamp(26px,3vw,45px);font-weight:400;line-height:1.1;letter-spacing:-.04em;margin:18px 0}.delivery-sheet>div{display:flex;flex-wrap:wrap;gap:6px}.delivery-sheet>div>span{font-size:10px;color:#bdb7ad;border:1px solid #ffffff25;padding:5px 10px;border-radius:30px}.delivery-line{display:flex;justify-content:space-between;margin-top:24px;padding-top:12px;border-top:1px solid var(--line);font-size:.72rem;color:#78746d}.delivery-line svg{width:14px;height:14px}@keyframes scan{0%{top:15%;opacity:0}15%{opacity:.7}90%{opacity:.7}100%{top:95%;opacity:0}}
.app-section{padding:65px 0 70px;background:#050505}.app-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:50px}.app-intro h2{font-size:clamp(36px,4.6vw,68px);margin-top:25px}.app-intro>.cta-pair{flex-wrap:wrap}.app-previews{position:relative;padding:20px 0 0;background:radial-gradient(ellipse at 50% 60%,#6a482312,transparent 70%);overflow:hidden}.app-previews .ux3{max-width:1120px;margin:auto}.app-previews .ux3-br{background-repeat:no-repeat}.app-previews svg{stroke:none}.app-previews .ux3-c{transition:transform 1.4s var(--ease);transform:translateY(var(--phone-y,0px))}.phone-controls{display:none}.app-section .source-note{text-align:center;margin-top:28px}.contact-section{padding-block:80px 90px;border-top:1px solid var(--line)}.contact-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:40px}.contact-row h2{font-size:clamp(42px,5.7vw,90px)}.contact-row>div{max-width:380px}.contact-row p{color:#9d978f;line-height:1.7;margin-bottom:25px;font-size:.97rem}.contact-row .button{margin-right:8px;margin-top:8px}.site-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:30px;align-items:center;padding-block:27px;color:#76716b;font-size:.78rem}.site-footer img{filter:invert(1);width:112px;height:auto}.site-footer>div{display:flex;gap:24px}.prototype-label{color:#4f4b46}.reveal{opacity:1;transform:none}.js-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity 1.2s var(--ease), transform 1.2s var(--ease)}.js-ready .reveal.is-visible{opacity:1;transform:none}
dialog{color:var(--fg);background:#11100f;border:1px solid #ffffff25;border-radius:12px;padding:45px;width:min(520px,calc(100% - 32px));max-height:calc(100svh - 36px);overflow:auto;box-shadow:0 25px 120px #000b}dialog::backdrop{background:#000b;backdrop-filter:blur(14px)}dialog[open]{animation:dialog-in .4s var(--ease)}.close-dialog{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:32px;height:32px;background:none;border:1px solid #ffffff25;border-radius:50%;z-index:10}.close-dialog svg{width:14px;height:14px}#contact-dialog h2{font-size:42px;margin:28px 0}#contact-form{display:flex;flex-direction:column}#contact-form label{font-size:.82rem;color:#c2bcb2;margin:14px 0 8px}#contact-form label span{color:#736c61;float:right}input,textarea{width:100%;background:#ffffff05;border:1px solid #ffffff23;border-radius:4px;padding:12px;color:white;font-size:.92rem}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#6d665e}#contact-form .button{margin-top:25px}#contact-form .source-note{margin-top:14px;text-align:center}.form-success p{color:#99938a;margin:22px 0 30px;font-size:.92rem;line-height:1.7}.form-success h3{font-size:36px;margin-top:40px}#scene-dialog{width:min(980px,calc(100% - 32px));padding:0;overflow:hidden;background:#0c0b0a}#scene-dialog>img{width:100%;max-height:70svh;object-fit:contain}#scene-dialog .close-dialog{background:#0a0908a8}.scene-dialog-caption{padding:24px 30px}.scene-dialog-caption h2{font-size:27px}.scene-dialog-caption p{font-size:.78rem;color:#8c8479;margin-top:12px}@keyframes dialog-in{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:none}}
@media(min-width:1600px){.network-copy{max-width:530px}.scene-card{flex-basis:26%}}
@media(max-width:1100px){.network-bottom{grid-template-columns:.9fr 1.2fr;gap:28px}.network-stats{gap:25px}.network-stats strong{font-size:59px}.network-stats>div>span{font-size:.72rem}.network-copy p{font-size:.86rem}.app-intro{align-items:center}.app-intro .cta-pair{max-width:145px}.app-intro .button{width:100%}.delivery-sheet{padding:25px}}
@media(max-width:760px){html{scroll-padding-top:80px}.hero{min-height:690px;height:92svh;max-height:900px}.hero-content{padding:60px 20px 75px}.hero h1{font-size:clamp(42px,7.9vw,62px);line-height:1.08}.hero p{font-size:.86rem;line-height:1.8;max-width:34ch;margin-top:25px}.hero p br{display:none}.upload-logo{width:72px;margin-bottom:30px}.hero-light{inset:-12% -40% 8%;background:radial-gradient(ellipse at 50% 8%,#e0c787 0,#d99340 25%,#ae531b 43%,#4b210a 58%,transparent 78%)}.hero-actions .button{padding:12px 16px;gap:20px;font-size:.86rem}.scroll-cue{bottom:48px}.hero-bottom-label{display:none}.network-section{height:850px;min-height:0;max-height:none}.network-top{top:32px;font-size:.72rem}.map-field{inset:70px -2% 160px}.uplm-map{width:220%;top:40%}.map-field:after{background:linear-gradient(0deg,#050505 0%,#05050566 25%,transparent 55%,#050505 100%)}.network-bottom{display:block;bottom:65px}.network-copy h2{font-size:31px}.network-copy p{margin-top:14px;font-size:.86rem}.network-stats{justify-content:flex-start;margin-top:35px;gap:30px}.network-stats strong{font-size:51px}.network-stats>div>span{font-size:.68rem}.network-stats i{width:4px;height:4px;margin-right:5px}.network-ui>.source-note{font-size:.68rem;bottom:25px}.diversity-section{padding-top:58px}.diversity-heading{display:block;margin-top:35px;margin-bottom:36px}.diversity-heading h2{font-size:54px}.diversity-heading p{font-size:.92rem;margin-top:22px}.scene-card{flex-basis:74%;min-width:240px}.scene-card:nth-child(even){margin-top:0}.scene-image{aspect-ratio:.95}.scene-rail{gap:14px;scroll-snap-type:x mandatory}.scene-title{font-size:1rem}.gallery-foot{font-size:.78rem}.delivery-sheet strong{font-size:36px}.app-section{padding-top:35px}.app-intro{display:block;margin-bottom:35px}.app-intro h2{font-size:44px}.app-intro .cta-pair{max-width:none;margin-top:28px;flex-wrap:nowrap}.app-intro .button{width:auto;padding:12px 16px;gap:15px;font-size:.86rem}.app-previews{margin-inline:calc(var(--page)*-1);padding-top:20px}.app-previews .ux3{display:flex!important;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 calc((100vw - 260px)/2) 20px;max-width:none;width:100%}.app-previews .ux3-c{flex:0 0 260px!important;width:260px!important;scroll-snap-align:center;transform:none!important}.app-previews .ux3-phone{width:260px!important}.phone-controls{display:flex;justify-content:center;gap:8px;margin-top:20px}.phone-controls button{font-size:.72rem;background:transparent;border:1px solid #ffffff23;border-radius:99px;padding:8px 10px;color:#79736b}.phone-controls button[aria-pressed="true"]{color:#eee9e0;border-color:#ffffff80}.app-section .source-note{font-size:.68rem}.contact-section{padding-block:55px}.contact-row{display:block;margin-top:30px}.contact-row h2{font-size:45px}.contact-row>div{margin-top:30px}.contact-row p{font-size:.86rem;margin-bottom:18px}.contact-row .button{font-size:.86rem;gap:20px;padding:12px 16px}.site-footer{gap:20px;flex-wrap:wrap;font-size:.72rem}.site-footer img{width:100px}.site-footer>div{gap:20px}.site-footer>span{margin-left:auto}.prototype-label{display:none}dialog{padding:30px 24px}.section-label{font-size:.72rem}#contact-dialog h2{font-size:36px}.scene-dialog-caption{padding:20px}.scene-dialog-caption h2{font-size:24px}}
@media(max-width:370px){.hero h1{font-size:38px}.hero-actions{gap:8px}.hero-actions .button{gap:12px;padding-inline:14px}.network-stats{gap:22px}.network-stats strong{font-size:43px}.network-stats>div>span{font-size:.66rem}.network-copy h2{font-size:29px}.contact-row h2{font-size:39px}}
@media(max-height:740px) and (min-width:761px){.hero{min-height:610px}.hero-content{padding-top:80px;padding-bottom:60px}.hero h1{font-size:clamp(50px,6vw,86px)}.hero p{margin-block:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-content,.hero-light,.map-field,.scene-image img,.app-previews .ux3-c{transform:none!important;opacity:1!important}.js-ready .reveal{opacity:1;transform:none}.scene-rail{scroll-behavior:auto}}
@media(max-width:760px){.network-stats{gap:20px}.network-stats strong{font-size:clamp(32px,10.8vw,43px)}.network-stats>div>span{font-size:.68rem}.uplm-map{width:185%;filter:contrast(1.1) brightness(1.12)}}
@media(max-width:370px){.network-stats{gap:16px}.network-stats>div>span{font-size:.66rem}}

/* Data pipeline: a cinematic visual and an automatically advancing timeline. */
.quality-section{position:relative;border-top:1px solid var(--line);margin-top:20px;padding:96px 0 88px}
.quality-statement{font-size:clamp(35px,4.35vw,68px);line-height:1.13;max-width:28ch;margin-top:34px;letter-spacing:-.045em}
.reading-word{color:#625e58;transition:color .6s var(--ease)}.reading-word.is-lit{color:#f1eee8}
.pipeline-workspace{margin-top:42px;--stage-progress:0}
.pipeline-visual{position:relative;overflow:hidden;height:clamp(320px,40vw,540px);background:#191814;border:1px solid #ffffff20;border-radius:3px;isolation:isolate}
.pipeline-visual>img{object-position:center 62%}
.pipeline-controls{margin-top:26px}
.pipeline-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pipeline-tabs>button{display:flex;align-items:baseline;gap:16px;position:relative;padding:19px 0 10px;border:0;background:none;text-align:left;color:#77736d;transition:color .45s var(--ease);min-width:0}
.pipeline-tabs>button:before,.pipeline-tabs>button:after{content:'';position:absolute;left:0;top:0;width:100%;height:1px;background:#ffffff29}
.pipeline-tabs>button:after{background:#eaa268;transform:scaleX(0);transform-origin:left}
.pipeline-tabs>button[aria-selected="true"]{color:#f6f2eb}
.pipeline-tabs>button[aria-selected="true"]:after{transform:scaleX(var(--stage-progress))}
.pipeline-tabs>button>span{font-size:.78rem;color:#77736d}
.pipeline-tabs>button[aria-selected="true"]>span{color:#eaa268}
.pipeline-tabs>button strong{font-size:clamp(20px,2.4vw,35px);font-weight:400;letter-spacing:-.045em}
.pipeline-tabs>button svg{display:none}
.pipeline-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;margin-top:18px}
#pipeline-detail{font-size:.86rem;line-height:1.65;color:#9d978e;max-width:61ch;min-height:40px}
.pipeline-playback{display:flex;align-items:center;gap:9px;flex-shrink:0;min-height:40px;padding:8px 13px;margin-top:-6px;background:#ffffff05;border:1px solid #ffffff26;border-radius:99px;color:#bcb7ae;font-size:.78rem;transition:background .3s var(--ease), border-color .3s var(--ease)}
.pipeline-playback:hover{background:#ffffff0d;border-color:#ffffff55}
.playback-symbol{width:9px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.pipeline-playback[data-paused="true"] .playback-symbol{width:9px;height:10px;border:5px solid transparent;border-left:8px solid currentColor;border-right:0}
.pipeline-workspace[data-playing="false"] .scanline{animation-play-state:paused}
@media(max-width:760px){
 .quality-section{padding:56px 0 62px}
 .quality-statement{font-size:clamp(30px,6.7vw,46px);line-height:1.18;margin-top:28px}
 .pipeline-workspace{margin-top:30px}
 .pipeline-visual{height:350px}
 .pipeline-visual>img{object-position:center 58%}
 .pipeline-controls{margin-top:22px}
 .pipeline-tabs{gap:12px}
 .pipeline-tabs>button{flex-direction:column;gap:6px;padding-top:13px}
 .pipeline-tabs>button strong{font-size:18px}
 .pipeline-tabs>button>span{font-size:.72rem}
 .pipeline-footer{gap:16px;margin-top:16px}
 #pipeline-detail{font-size:.82rem;min-height:74px}
 .pipeline-playback{padding-inline:11px}
}
@media(max-width:370px){.quality-statement{font-size:27px}.pipeline-tabs{gap:9px}.pipeline-tabs>button strong{font-size:1rem}.pipeline-visual{height:320px}}
@media(prefers-reduced-motion:reduce){.reading-word{color:var(--fg)}}

/* Review refinements: integrated map, compact task grid, quieter controls. */
.hero{height:92svh;min-height:660px;max-height:1000px}
.hero-content{padding-bottom:65px}
.button{gap:0;padding-inline:25px;min-width:126px}
.button-secondary{background:#ffffff06;border-color:#ffffff4a}
.nav-actions .button{min-width:0}
.hero-actions{gap:10px}
.hero-actions .button{min-width:144px;padding-block:15px;font-size:.92rem}
.section-label{justify-content:flex-start;gap:22px;align-items:center}
.section-label>span:first-child{color:#c0bab0}
.section-label>span+span{padding-left:22px;border-left:1px solid #ffffff26}
.network-section{height:92svh;min-height:760px;max-height:1000px}
.network-top{top:44px}
.network-bottom{display:contents}
.network-copy{position:absolute;left:var(--page);top:126px;z-index:2;max-width:560px}
.network-copy h2{font-size:clamp(34px,3.6vw,57px);line-height:1.1}
.network-copy p{margin-top:18px;max-width:none;font-size:.92rem;color:#a8a49d}
.network-stats{position:absolute;left:var(--page);right:var(--page);bottom:125px;justify-content:flex-start;gap:clamp(60px,10vw,180px);z-index:2}
.network-stats strong{font-size:clamp(65px,8.3vw,130px);margin-top:10px;line-height:1.05}
.network-stats strong .count-value{display:inline;color:inherit;font-size:1em;vertical-align:baseline;position:static;margin:0;letter-spacing:inherit;min-width:7.1ch}
.network-stats>div:first-child strong{min-width:7.4ch}
.network-stats>div:last-child strong{min-width:4.4ch}
.map-field{inset:-5% -4% -10%}
.uplm-map{top:49%;filter:contrast(1.1) brightness(1.25)}
.map-field:after{background:linear-gradient(0deg,#050505 0,#0505058a 18%,transparent 48%,#05050536 70%,#050505 100%)}
.network-stats>div>span{text-shadow:0 2px 15px #000}
.diversity-heading{margin-top:38px;margin-bottom:40px}
.diversity-heading h2{font-size:clamp(44px,5.3vw,76px)}
.scene-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;padding-block:22px}
.scene-tile{margin:0;min-width:0;transition-delay:calc(var(--tile-index)*65ms)!important}
.scene-tile:nth-child(even){padding-top:30px}
.scene-tile .scene-image{aspect-ratio:.78;border-radius:3px}
.scene-tile .scene-image img{filter:saturate(.68) brightness(.9);transform:scale(1.06) translateY(var(--scene-y,0px))}
.scene-tile .scene-title{font-size:.92rem;line-height:1.5;margin-top:14px;letter-spacing:-.015em}
.scene-tile .scene-meta{font-size:.72rem;line-height:1.6;margin-top:5px}
.scene-tile .scene-index{bottom:12px;left:12px;font-size:.72rem}
.quality-statement{max-width:unset;font-size:clamp(34px,4.6vw,72px);line-height:1.18}
.quality-statement .reading-word{display:inline-block;color:var(--fg);opacity:var(--word-opacity,.2);transform:translateY(var(--word-y,14px));transition:opacity .3s var(--ease), transform .3s var(--ease)}
.app-previews .ux3{display:grid!important;grid-template-columns:repeat(2,minmax(0,290px))!important;justify-content:center;gap:70px!important;max-width:780px!important;margin-inline:auto!important}
.app-previews .ux3-c{width:100%!important}
@media(max-width:1100px){.scene-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.scene-tile:nth-child(even){padding-top:0}.scene-tile .scene-image{aspect-ratio:1.1}.scene-tile .scene-title{font-size:1rem}.network-stats{gap:60px}.network-stats strong{font-size:78px}}
@media(max-width:760px){
 .hero{height:85svh;min-height:610px}.hero-content{padding-block:75px 55px}
 .hero-actions .button{min-width:132px;font-size:.86rem;padding:13px 19px}
 .section-label{gap:14px}.section-label>span+span{padding-left:14px}
 .network-section{height:780px;min-height:0}.network-top{top:32px}
 .network-copy{top:106px;right:var(--page)}.network-copy h2{font-size:35px}.network-copy p{font-size:.86rem;max-width:28ch}
 .network-stats{bottom:135px;gap:25px;margin:0}.network-stats strong{font-size:clamp(36px,10.7vw,66px)}
 .network-stats>div>span{font-size:.68rem}.map-field{inset:90px -8% 0}.uplm-map{width:192%;top:47%}
 .scene-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;padding-top:0}
 .scene-tile .scene-image{aspect-ratio:.9}.scene-tile .scene-title{font-size:.86rem}.scene-tile .scene-meta{font-size:.68rem}
 .diversity-heading{margin-bottom:32px}.diversity-heading h2{font-size:50px}
 .quality-statement{font-size:clamp(28px,6.5vw,43px);max-width:22ch}
 .app-previews{margin-inline:0;padding-top:8px}
 .app-previews .ux3{gap:16px!important;padding:0!important;overflow:visible;scroll-snap-type:none;max-width:580px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .app-previews .ux3-c{min-width:0!important;flex:initial!important}
}
@media(prefers-reduced-motion:reduce){.quality-statement .reading-word{opacity:1!important;transform:none!important}.scene-tile{transition-delay:0s!important}}

.scene-tile .scene-image{aspect-ratio:1}
.scene-atlas{display:block;position:absolute;inset:0;background-image:url('6adfa5a08e4cd92e3df618fb_mu-diversity-black-pin-atlas.jpg');background-size:303.5573% 202.3715%;background-repeat:no-repeat;filter:saturate(.74) brightness(.92);transform:scale(1.06) translateY(var(--scene-y,0px));will-change:transform}
.phone-frame{width:100%;aspect-ratio:9/19.3;position:relative}
.app-previews .phone-frame .ux3-f{width:290px;max-width:none;height:621.89px;transform:scale(var(--phone-scale,1));transform-origin:top left}
@media(max-width:760px){.ux3-cap{font-size:11px!important;line-height:1.5!important}}
@media(prefers-reduced-motion:reduce){.scene-atlas{transform:scale(1.06);will-change:auto}}

/* hardware.css */
/* One real 3D Pin and spring-mounted accessories. */
.mu-hardware {
  --hw-muted: #999;
  --hw-warm: #d6bd9d;
  --hw-line: rgba(255, 255, 255, .14);
  position: relative;
  padding: 0;
  background: #060606;
  color: #fff;
  isolation: isolate;
  overflow: clip;
}
.mu-hardware * { box-sizing: border-box; }
.mu-hardware .mx { position: relative; height: auto; }
.mu-hardware.is-ready .mx { height: auto; }
.mu-hardware .mx-sticky {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: center;
  gap: 14px;
  min-height: 0;
  height: auto;
  padding: 82px 24px 30px;
}
.mu-hardware .hw-intro { position: relative; z-index: 2; text-align: center; }
.mu-hardware .hw-eyebrow {
  margin: 0 0 12px;
  color: #bdb5aa;
  font-size:.86rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mu-hardware .hw-intro h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 4.2vw, 55px);
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.mu-hardware .hw-intro > p:last-child {
  margin: 14px 0 0;
  color: var(--hw-muted);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.5;
}
.mu-hardware .mx-glow {
  position: absolute;
  top: 47%;
  left: 50%;
  z-index: -1;
  width: min(900px, 105vw);
  height: min(470px, 62vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 40% 45%, rgba(164, 157, 145, .09), transparent 58%),
    radial-gradient(ellipse at 69% 61%, rgba(151, 120, 83, .07), transparent 52%);
  filter: blur(34px);
  pointer-events: none;
}
.mu-hardware .mx-stage {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: min(600px, 88vw);
  height: 400px;
  min-height: 0;
  max-height: none;
  margin: 0 auto;
  cursor: default;
  touch-action: pan-y;
}
.mu-hardware .mx-stage::before {
  content: '';
  position: absolute;
  inset: -8% -16%;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 48%, #353432 0%, #2a2927 28%, rgba(35, 34, 32, .74) 46%, rgba(22, 21, 20, .3) 64%, transparent 78%);
  filter: blur(20px);
  pointer-events: none;
}
.mu-hardware .hw-stage-artboard {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}
.mu-hardware .mx-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition:opacity .3s cubic-bezier(.22, 1, .36, 1);
}
.mu-hardware .mx-layer.on { opacity: 1; }
.mu-hardware .mx-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  mask-image: radial-gradient(ellipse, #000 47%, transparent 71%);
}
.mu-hardware .mx-gl {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -12%;
  width: min(100vw, 1200px);
  height: 124%;
  transform: translateX(-50%);
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
  transition:opacity .3s cubic-bezier(.22, 1, .36, 1);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(180deg, transparent, #000 9%, #000 86%, transparent);
  mask-composite: intersect;
}
.mu-hardware .mx-gl.grab { cursor: grabbing; }
.mu-hardware .mx.gl .mx-gl { opacity: 1; }
.mu-hardware .mx.gl .mx-layer,
/* While the model loads the stage stays empty rather than showing a still of it. */
.mu-hardware .mx.gl-pending .mx-layer { opacity: 0; }
.mu-hardware .hw-bottom { position: relative; z-index: 2; width: 100%; text-align: center; }
.mu-hardware .mx-copy { position: relative; min-height: 60px; margin-bottom: 12px; }
.mu-hardware .mx-text { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition:opacity .3s cubic-bezier(.22, 1, .36, 1); }
.mu-hardware .mx-text.on { opacity: 1; visibility: visible; }
.mu-hardware .mx-text h3 { margin: 0; color: #fff; font-size: 25px; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.mu-hardware .mx-text p { margin: 8px auto 0; max-width: 48ch; color: var(--hw-muted); font-size:.97rem; line-height: 1.4; }
.mu-hardware .mx-nav { display: none; }
.mu-hardware.is-ready .mx-nav { display: block; }
.mu-hardware .mx-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.mu-hardware .mx-tabs button {
  appearance: none;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 15px;
  background: transparent;
  color: #999;
  font: inherit;
  font-size:.92rem;
  line-height: 1;
  cursor: pointer;
  transition:color .3s cubic-bezier(.22, 1, .36, 1), background .3s cubic-bezier(.22, 1, .36, 1), border-color .3s cubic-bezier(.22, 1, .36, 1);
}
.mu-hardware .mx-tabs button:hover { color: #fff; }
.mu-hardware .mx-tabs button:disabled { opacity: .35; cursor: default; }
.mu-hardware .mx-tabs button.on { border-color: rgba(214,189,157,.27); background: rgba(214,189,157,.07); color: #fff; }
.mu-hardware .mx-tabs button:focus-visible,
.mu-hardware a:focus-visible,
.mu-hardware summary:focus-visible { outline: 2px solid var(--hw-warm); outline-offset: 5px; }
.mu-hardware .hw-nojs { margin: 18px auto; max-width: 50ch; color: var(--hw-muted); font-size:.97rem; }
@media (max-width: 760px), (max-height: 620px) {
  .mu-hardware.is-ready .mx { height: auto; }
  .mu-hardware .mx-sticky { position: relative; height: auto; min-height: 0; grid-template-rows: auto auto auto; padding: 80px 20px 30px; gap: 20px; }
  .mu-hardware .hw-intro h2 { max-width: 12ch; margin: 0 auto; font-size: clamp(34px, 7.7vw, 48px); }
  .mu-hardware .hw-intro > p:last-child { max-width: 29ch; margin-inline: auto; }
  .mu-hardware .mx-stage { width: min(90vw, 500px); height: clamp(260px, 80vw, 370px); max-height: none; min-height: 0; }
  .mu-hardware .mx-copy { min-height: 76px; margin-bottom: 10px; }
  .mu-hardware .mx-text h3 { font-size: 24px; }
  .mu-hardware .mx-text p { max-width: 31ch; font-size:.97rem; }
  .mu-hardware .mx-tabs { gap: 1px; }
  .mu-hardware .mx-tabs button { min-height: 42px; padding: 9px 11px; font-size:.86rem; }
}
@media (min-height: 621px) and (max-height: 740px) and (min-width: 761px) {
  .mu-hardware .mx-sticky { min-height: 0; padding-block: 74px 20px; }
  .mu-hardware .mx-stage { height: 360px; }
  .mu-hardware .hw-intro h2 { font-size: 40px; }
  .mu-hardware .hw-intro > p:last-child { margin-top: 9px; font-size:.97rem; }
  .mu-hardware .hw-eyebrow { margin-bottom: 9px; }
  .mu-hardware .mx-text h3 { font-size: 22px; }
}
@media (min-width: 761px) and (max-height: 620px) {
  .mu-hardware .hw-intro { width: 100%; max-width: none; }
  .mu-hardware .hw-intro h2 { max-width: none; margin: 0; font-size: 40px; }
  .mu-hardware .hw-intro > p:last-child { max-width: none; margin-top: 9px; font-size:.97rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mu-hardware.is-ready .mx { height: auto; }
  .mu-hardware .mx-sticky { position: relative; height: auto; min-height: 0; grid-template-rows: auto auto auto; padding-block: 90px 36px; gap: 24px; }
  .mu-hardware .mx-stage { height: min(70vw, 400px); max-height: none; }
  .mu-hardware .mx-gl { transition:none; }
  .mu-hardware .mx-layer, .mu-hardware .mx-text, .mu-hardware .mx-tabs button { transition:none; transform: none; }
}
.mu-hardware .hw-hint-scroll,.mu-hardware .hw-hint-tap{display:none}
.mu-hardware .mx-bar, .mu-hardware .hw-interaction-hint { display: none; }

@media(max-width:760px) { .mu-hardware .mx-tabs button { min-height:44px; } }

/* Mount panel: the mount copy over one list that is both the step rail and the way to jump.
   Outside the scroll story the panel sits below the stage with the list as centred tabs. */
.mu-hardware .hw-panel { position: relative; z-index: 2; order: 3; width: 100%; text-align: center; }
.mu-hardware .hw-stage-wrap { order: 2; width: 100%; display: flex; justify-content: center; }
.mu-hardware .hw-intro { order: 1; }
.mu-hardware .hw-bottom { order: 4; }
.mu-hardware .mx-tabs { margin: 0; padding: 0; list-style: none; }

/* Scroll story (hardware.js adds .is-scrolly): the stage holds while scroll moves through the mounts.
   --hw-in brings the Pin in · --hw-title lifts the title away · --hw-split slides the Pin aside for
   the panel · --hw-rail fills the mount list. */
.mu-hardware.is-scrolly .mx { height: calc(100svh + 240svh); }
.mu-hardware.is-scrolly .mx-sticky {
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  grid-template-columns: minmax(300px, .82fr) 1.18fr;
  grid-template-rows: 1fr auto;
  align-items: center; justify-items: stretch;
  gap: 0 clamp(24px, 4vw, 72px);
  padding: 96px var(--page) 30px;
  overflow: hidden;
}
.mu-hardware.is-scrolly .mx-glow {
  top: 46%; left: calc(50% + var(--hw-split, 0) * 18%);
  width: min(1100px, 120vw); height: min(640px, 76vh);
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 145, 61, .05), transparent 56%),
    radial-gradient(ellipse at 50% 45%, rgba(164, 157, 145, .08), transparent 62%);
}

/* Title: starts over the lone Pin, then lifts and blurs away like the hero copy. */
.mu-hardware.is-scrolly .hw-intro {
  position: absolute; left: 0; right: 0; top: clamp(96px, 15vh, 150px);
  padding: 0 var(--page);
  translate: 0 calc(var(--hw-title, 0) * -70px);
  filter: blur(calc(var(--hw-title, 0) * 10px)) opacity(calc(1 - var(--hw-title, 0)));
  pointer-events: none;
}
.mu-hardware.is-scrolly .hw-intro h2 { font-size: clamp(40px, 5vw, 72px); }
.mu-hardware.is-scrolly .hw-intro > p:last-child { max-width: 44ch; margin-inline: auto; }

/* Stage: centred under the title, then eased into the right column. */
.mu-hardware.is-scrolly .hw-stage-wrap {
  grid-column: 2; grid-row: 1; align-self: stretch; align-items: center;
  translate: calc((1 - var(--hw-split, 0)) * var(--hw-from, 0px)) calc((1 - var(--hw-split, 0)) * 7vh);
  scale: calc(.86 + var(--hw-in, 1) * .14);
  filter: opacity(var(--hw-in, 1));
}
.mu-hardware.is-scrolly .mx-stage { width: 100%; max-width: 760px; height: min(64vh, 620px); }
.mu-hardware.is-scrolly .mx-gl { width: min(100vw, 1400px); }
/* A soft ring when a mount clicks home. */
.mu-hardware.is-scrolly .mx-stage::after {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid #ff913d;
  translate: -50% -50%; scale: .7; opacity: 0; pointer-events: none;
}
.mu-hardware.is-scrolly .mx-stage.is-click::after { animation: hw-click 1.1s cubic-bezier(.22, 1, .36, 1); }
@keyframes hw-click { 0% { scale: .7; opacity: .55; } 100% { scale: 1.35; opacity: 0; } }

/* Panel: arrives as the Pin moves aside. */
.mu-hardware.is-scrolly .hw-panel {
  grid-column: 1; grid-row: 1; align-self: center;
  text-align: left;
  translate: calc((1 - var(--hw-split, 0)) * -40px) 0;
  filter: blur(calc((1 - var(--hw-split, 0)) * 8px)) opacity(var(--hw-split, 0));
}
.mu-hardware.is-scrolly .mx-copy { min-height: 136px; margin: 0; }
.mu-hardware.is-scrolly .mx-text { transition:opacity .45s cubic-bezier(.22, 1, .36, 1), translate .45s cubic-bezier(.22, 1, .36, 1), filter .45s cubic-bezier(.22, 1, .36, 1); translate: 0 14px; filter: blur(6px); }
.mu-hardware.is-scrolly .mx-text.on { translate: 0 0; filter: none; }
.mu-hardware.is-scrolly .mx-text h3 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.mu-hardware.is-scrolly .mx-text p { max-width: 52ch; margin: 14px 0 0; font-size:1.05rem; line-height: 1.5; color: #aaa49a; }

/* Mount list: a vertical rail, top to bottom in scroll order. The orange fill tracks progress;
   the current mount's dot lights up. */
.mu-hardware.is-scrolly .mx-nav { display: block; margin-top: 40px; }
.mu-hardware.is-scrolly .mx-tabs { position: relative; display: grid; gap: 2px; justify-content: start; }
.mu-hardware.is-scrolly .mx-tabs::before,
.mu-hardware.is-scrolly .mx-tabs::after {
  content: ''; position: absolute; left: 4px; top: 18px; width: 1px; height: calc(100% - 36px);
  background: #ffffff1f; transform-origin: top;
}
.mu-hardware.is-scrolly .mx-tabs::after { background: #6b655e; transform: scaleY(var(--hw-rail, 0)); }
.mu-hardware.is-scrolly .mx-tabs button {
  position: relative; min-height: 36px; padding: 8px 12px 8px 26px;
  border: 0; border-radius: 0; background: none;
  color: #6f6b66; font-size:1rem; text-align: left;
}
.mu-hardware.is-scrolly .mx-tabs button::before {
  content: ''; position: absolute; z-index: 1; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: #060606; border: 1px solid #ffffff38;
  transition:background .45s cubic-bezier(.22, 1, .36, 1), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.mu-hardware.is-scrolly .mx-tabs button:hover { color: #d5d0c8; }
.mu-hardware.is-scrolly .mx-tabs button.on { background: none; color: #fff; }
.mu-hardware.is-scrolly .mx-tabs button.on::before { background: #ff913d; border-color: #ff913d; box-shadow: 0 0 14px #ff913d99; }

/* Bottom: just the call to action, under the panel. */
html.story-ready main .mu-hardware.is-scrolly .hw-bottom.story-enter { opacity: 1; translate: none; filter: opacity(var(--hw-split, 0)); }
.mu-hardware.is-scrolly .hw-bottom {
  grid-column: 1; grid-row: 2;
  display: flex; align-items: center; justify-content: flex-start;
  filter: opacity(var(--hw-split, 0));
}
.mu-hardware.is-scrolly .hw-interaction-hint { display: none; }

@media (max-width: 900px) {
  .mu-hardware.is-scrolly .mx { height: calc(100svh + 210svh); }
  .mu-hardware.is-scrolly .mx-sticky {
    grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto;
    gap: 0; padding: 84px 20px 22px;
  }
  .mu-hardware.is-scrolly .hw-intro { top: 96px; padding: 0 20px; }
  .mu-hardware.is-scrolly .hw-intro h2 { font-size: clamp(36px, 9vw, 52px); }
  .mu-hardware.is-scrolly .mx-copy { min-height: 112px; }
  .mu-hardware.is-scrolly .mx-text h3 { font-size: 30px; }
  .mu-hardware.is-scrolly .mx-text p { margin-top: 10px; font-size:.97rem; }
  .mu-hardware.is-scrolly .hw-stage-wrap { grid-column: 1; grid-row: 3; translate: 0 calc((1 - var(--hw-split, 0)) * -6vh); }
  .mu-hardware.is-scrolly .mx-stage { height: 100%; max-height: 52vh; min-height: 240px; }
  /* On phones the list runs along the bottom as a horizontal rail. */
  .mu-hardware.is-scrolly .hw-panel { display: contents; }
  .mu-hardware.is-scrolly .hw-panel > * { grid-column: 1; translate: 0 calc((1 - var(--hw-split, 0)) * 16px); filter: blur(calc((1 - var(--hw-split, 0)) * 8px)) opacity(var(--hw-split, 0)); }
  .mu-hardware.is-scrolly .mx-copy { grid-row: 2; }
  .mu-hardware.is-scrolly .mx-nav { grid-row: 4; margin: 0; translate: none; filter: opacity(var(--hw-split, 0)); }
  .mu-hardware.is-scrolly .mx-tabs { display: flex; gap: 0; }
  .mu-hardware.is-scrolly .mx-tabs li { flex: 1 1 0; }
  .mu-hardware.is-scrolly .mx-tabs::before, .mu-hardware.is-scrolly .mx-tabs::after { left: 10%; top: 4px; width: 80%; height: 1px; transform-origin: left; }
  .mu-hardware.is-scrolly .mx-tabs::after { transform: scaleX(var(--hw-rail, 0)); }
  .mu-hardware.is-scrolly .mx-tabs button { display: block; width: 100%; min-height: 44px; padding: 20px 2px 4px; font-size:.86rem; text-align: center; }
  .mu-hardware.is-scrolly .mx-tabs button::before { left: 50%; top: 0; margin: 0 0 0 -4.5px; }
  .mu-hardware.is-scrolly .hw-bottom { display: none; }
}

/* details.css */
/* Hardware details: LUCI Pin's pinned horizontal gallery, set in the landing page's type and palette. */
.mu-hardware .dt {
  --dt-ease: cubic-bezier(.22,1,.36,1);
  --dt-amber: #ffad56;
  --dt-cream: #dcc9a0;
  --dt-gutter: var(--page, clamp(22px,4.2vw,84px));
  position: relative;
  padding-block: clamp(80px,12vh,140px);
  border-top: 1px solid #ffffff0f;
}
.mu-hardware .dt.pinned { padding-block: 0; }
.mu-hardware .dt-stage { position: relative; }
.mu-hardware .dt.pinned .dt-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }

.mu-hardware .dt-track {
  display: flex;
  align-items: stretch;
  gap: clamp(14px,1.4vw,22px);
  padding-inline: var(--dt-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--dt-gutter);
  scrollbar-width: none;
}
.mu-hardware .dt-track::-webkit-scrollbar { display: none; }
.mu-hardware .dt.pinned .dt-track { overflow: visible; width: max-content; scroll-snap-type: none; will-change: transform; }

/* Intro column: title, lead and the line drawing. */
.mu-hardware .dt-intro { flex: 0 0 min(520px,86vw); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-right: clamp(0px,4vw,72px); scroll-snap-align: start; }
.mu-hardware .dt-intro h2 { margin: 0; color: #fff; font-size: clamp(34px,4vw,55px); font-weight: 500; line-height: 1.07; letter-spacing: -.045em; text-wrap: balance; }
.mu-hardware .dt-lead { margin: 20px 0 0; max-width: 30em; color: #b4b0a9; font-size: clamp(15px,1.25vw,18px); line-height: 1.5; letter-spacing: -.005em; text-wrap: pretty; }
.mu-hardware .dt-dims { margin: 0; }
.mu-hardware .dt-dims svg { display: block; width: 100%; max-width: 440px; height: auto; overflow: visible; fill: none; stroke: none; }
.mu-hardware .dt-dims .body { fill: #0d0b0a; stroke: var(--dt-cream); stroke-opacity: .7; stroke-width: 1.2; }
.mu-hardware .dt-dims .line { fill: none; stroke: #ffffff73; stroke-width: 1; }
.mu-hardware .dt-dims .lab { fill: var(--dt-amber); font: 400 12px Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mu-hardware .dt-dims .led { fill: #ff8a28; }
.mu-hardware .dt-dims .led-deep { fill: #ee5a1a; }
.mu-hardware .dt-dims .draw { stroke-dasharray: 1000; stroke-dashoffset: 0; transition:stroke-dashoffset 1.8s var(--dt-ease) var(--ease); }
.mu-hardware .dt-dims .lab { transition:opacity .9s var(--dt-ease) .6s var(--ease); }
.mu-hardware .dt.is-ready .dt-dims:not(.go) .draw { stroke-dashoffset: 1000; }
.mu-hardware .dt.is-ready .dt-dims:not(.go) .lab { opacity: 0; }

/* Panels: black cards, product shot anchored per image, caption over a top fade. */
.mu-hardware .dt-panel {
  position: relative;
  flex: 0 0 clamp(300px,50vw,820px);
  height: min(74svh,660px);
  min-height: 420px;
  margin: 0;
  border-radius: clamp(18px,2vw,28px);
  overflow: hidden;
  background: #000;
  border: 1px solid #ffffff1f;
  scroll-snap-align: start;
}
.mu-hardware .dt-pi { position: absolute; display: block; max-width: none; height: auto; transition:scale 1.4s var(--dt-ease) var(--ease); }
.mu-hardware .dt-panel:hover .dt-pi { scale: 1.03; }
/* Images fade in once loaded and in view, instead of popping in. */
.mu-hardware .dt.is-ready .dt-pi { opacity: 0; transition:opacity 1.4s var(--dt-ease) var(--ease), scale 1.4s var(--dt-ease) var(--ease); }
.mu-hardware .dt.is-ready .dt-pi.in { opacity: 1; }
.mu-hardware .pi-br { right: 0; bottom: 0; width: min(64%,var(--w)); }
.mu-hardware .pi-br.big2 { width: min(88%,var(--w)); }
.mu-hardware .pi-br.cam { width: min(56%,var(--w)); }

.mu-hardware .dt-panel figcaption { position: absolute; inset: 0 0 auto; z-index: 1; display: grid; gap: 8px; padding: clamp(22px,2.6vw,36px); background: linear-gradient(180deg,#000000b3 0%,#0000 100%); }
.mu-hardware .dt-n { color: var(--dt-amber); font-size:.82rem; font-weight: 600; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; }
.mu-hardware .dt-panel h3 { margin: 0; color: #fff; font-size: clamp(22px,2vw,30px); font-weight: 500; line-height: 1.12; letter-spacing: -.035em; }
.mu-hardware .dt-panel p { margin: 0; max-width: 28em; color: #b4b0a9; font-size:1rem; line-height: 1.45; text-wrap: pretty; }

/* Progress bar under the pinned track. */
.mu-hardware .dt-foot { display: flex; align-items: center; margin: 32px var(--dt-gutter) 0; }
.mu-hardware .dt-bar { flex: 1; max-width: 200px; height: 2px; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
.mu-hardware .dt-bar span { display: block; height: 100%; background: linear-gradient(90deg,var(--dt-amber),#ee5a1a); transform-origin: left; transform: scaleX(var(--p,0)); }
.mu-hardware .dt:not(.pinned) .dt-foot { display: none; }

@media (max-width: 820px) {
  .mu-hardware .dt-panel { flex-basis: 84vw; height: auto; aspect-ratio: 4/5; min-height: 0; }
}
@media (max-width: 760px) {
  .mu-hardware .dt { padding-block: 64px 72px; }
  .mu-hardware .dt-intro { gap: 28px; padding-right: 0; }
  .mu-hardware .dt-intro h2 { font-size: clamp(34px,7.7vw,48px); }
  .mu-hardware .dt-panel p { font-size:.97rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mu-hardware .dt-pi, .mu-hardware .dt-dims .draw, .mu-hardware .dt-dims .lab { transition:none; }
  .mu-hardware .dt-panel:hover .dt-pi { scale: 1; }
}

/* hero.css */
/* Original vector study: a ribbon of captured frames. No image assets. */
.hero { isolation: isolate; }
.hero-light {
  background:
    radial-gradient(ellipse 68% 72% at 50% -11%, #dfa05f 0%, #975020 23%, #472819 46%, transparent 76%),
    #080706;
  animation: none;
}
.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: paint;
  -webkit-mask-image: linear-gradient(#000 76%, transparent 100%);
  mask-image: linear-gradient(#000 76%, transparent 100%);
}
.hero .memory-ribbon {
  position: absolute;
  left: 50%;
  bottom: -68px;
  width: min(118%, 1680px);
  height: auto;
  fill: none;
  stroke: none;
  transform: translateX(-50%) translateY(calc(var(--hero-progress, 0) * -32px));
  overflow: visible;
}
.memory-frame {
  opacity: var(--frame-opacity);
  transform: translate(calc(var(--hero-progress, 0) * var(--spread) * 7px), calc(var(--hero-progress, 0) * var(--rise) * 3px));
}
.memory-sheet {
  fill: url(#memory-sheet-fill);
  stroke: #dfcabb;
  stroke-width: .85px;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: memory-trace 2.4s cubic-bezier(.2,.65,.3,1) both;
  animation-delay: var(--delay);
}
.memory-frame--focus { opacity: 1; }
.memory-frame--focus .memory-sheet { stroke: #f3aa6d; stroke-width: 1px; }
.capture-corners { stroke: #e8ba95; stroke-width: .8px; opacity: .7; }
.capture-point { fill: #ffb476; }
.hero-visual ~ .hero-content {
  z-index: 2;
  padding-bottom: 165px;
}
@keyframes memory-trace { from { stroke-dashoffset: 1; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@media (min-width: 1600px) {
  .hero .memory-ribbon { bottom: -94px; }
}
@media (max-width: 760px) {
  .hero { min-height: 700px; height: 92svh; max-height: 900px; }
  .hero-light { background: radial-gradient(ellipse 120% 70% at 50% -8%, #bd7b3e 0%, #653719 30%, #241810 59%, transparent 86%), #080706; }
  .hero .memory-ribbon { width: 790px; bottom: -10px; }
  .hero-visual ~ .hero-content { padding: 25px 0 140px; }
}
@media (max-width: 370px) {
  .hero .memory-ribbon { width: 710px; bottom: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .memory-sheet { animation: none; }
  .memory-frame { transform: none; }
  .hero .memory-ribbon { transform: translateX(-50%); }
}

/* contact.css */
/* Inline contact section. All submission behavior is a local prototype. */
.mu-contact {
  padding: clamp(72px, 9vw, 144px) 0;
  scroll-margin-top: 0;
  background: #050505;
  color: #f6f5f2;
}
.mu-contact * { box-sizing: border-box; }
.mu-contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(48px, 7vw, 124px);
  width: calc(100% - var(--page, 48px) * 2);
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 54px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.mu-contact__eyebrow {
  margin: 0 0 24px;
  color: #a5a19b;
  font-size:.82rem;
  font-weight: 500;
  letter-spacing: .06em;
}
.mu-contact h2 {
  margin: 0;
  max-width: 12ch;
  color: #f6f5f2;
  font-size: clamp(38px, 4.5vw, 66px);
  font-weight: 500;
  line-height: 1.09;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.mu-contact__intro {
  max-width: 34ch;
  margin: 28px 0 0;
  color: #b2aea7;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.65;
}
.mu-contact__prompt {
  max-width: 35ch;
  margin: 18px 0 0;
  color: #85817b;
  font-size:.92rem;
  line-height: 1.6;
}
.mu-contact__panel { min-width: 0; }
.mu-contact__form { display: grid; gap: 25px; margin: 0; }
.mu-contact__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mu-contact__field { display: grid; gap: 10px; min-width: 0; }
.mu-contact label { display: block; color: #e9e6e1; font-size:.86rem; font-weight: 500; line-height: 1.4; }
.mu-contact label > span { margin-left: 8px; color: #85817b; font-size:.82rem; font-weight: 400; }
.mu-contact input,
.mu-contact select,
.mu-contact textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 5px;
  padding: 14px 15px;
  background: #10100f;
  color: #f6f5f2;
  font: inherit;
  font-size:.97rem;
  font-weight: 400;
  line-height: 1.45;
  color-scheme: dark;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.mu-contact input,
.mu-contact select { min-height: 51px; }
.mu-contact input::placeholder,
.mu-contact textarea::placeholder { color: #77746e; opacity: 1; }
.mu-contact textarea { min-height: 142px; resize: vertical; }
.mu-contact input:hover,
.mu-contact select:hover,
.mu-contact textarea:hover { border-color: rgba(255,255,255,.3); }
.mu-contact input:focus,
.mu-contact select:focus,
.mu-contact textarea:focus { border-color: #d6bd9d; background: #141310; outline: 1px solid #d6bd9d; outline-offset: 2px; }
.mu-contact__select { position: relative; }
.mu-contact select { appearance: none; padding-right: 42px; cursor: pointer; }
.mu-contact select:invalid { color: #85817b; }
.mu-contact select option { background: #171613; color: #f6f5f2; }
.mu-contact__select > svg { position: absolute; top: 17px; right: 15px; width: 16px; height: 16px; fill: none; stroke: #a49e94; stroke-width: 1.4; pointer-events: none; }
.mu-contact__submit-row { display: flex; align-items: center; gap: 24px; margin-top: 4px; }
.mu-contact__send,
.mu-contact__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  min-height: 48px;
  border: 1px solid #f5f4f0;
  border-radius: 99px;
  padding: 13px 24px;
  background: #f5f4f0;
  color: #141414;
  font: inherit;
  font-size:.92rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.mu-contact__send:hover { background: #fff; border-color: #fff; }
.mu-contact__send:disabled { cursor: default; opacity: .45; }
.mu-contact__send:focus-visible,
.mu-contact__reset:focus-visible { outline: 2px solid #d6bd9d; outline-offset: 5px; }
.mu-contact__note { max-width: 27ch; margin: 0; color: #85817b; font-size:.82rem; line-height: 1.55; }
.mu-contact__success {
  display: flex;
  min-height: 456px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 44px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background: radial-gradient(ellipse at 0 0, rgba(196,169,129,.07), transparent 65%), #0c0c0b;
}
.mu-contact [hidden] { display: none !important; }
.mu-contact__success:focus { outline: none; }
.mu-contact__success-mark { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 26px; border: 1px solid rgba(214,189,157,.4); border-radius: 50%; color: #d6bd9d; }
.mu-contact__success-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mu-contact__success h3 { margin: 0; color: #f6f5f2; font-size: clamp(26px, 3vw, 36px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.mu-contact__success p { margin: 16px 0 26px; color: #aaa59c; font-size:.97rem; line-height: 1.65; }
.mu-contact__reset { gap: 24px; border-color: rgba(255,255,255,.26); background: transparent; color: #ece8e0; }
.mu-contact__reset:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.04); }
@media (max-width: 800px) {
  .mu-contact { padding: 70px 0 76px; }
  .mu-contact__inner { grid-template-columns: 1fr; gap: 40px; padding-top: 38px; }
  .mu-contact h2 { max-width: 14ch; font-size: clamp(38px, 7.5vw, 56px); }
  .mu-contact__intro { max-width: 38ch; margin-top: 24px; }
  .mu-contact__prompt { margin-top: 14px; }
  .mu-contact__success { min-height: 390px; }
}
@media (max-width: 480px) {
  .mu-contact__fields { grid-template-columns: 1fr; gap: 23px; }
  .mu-contact__form { gap: 23px; }
  .mu-contact input, .mu-contact select, .mu-contact textarea { font-size:1.05rem; }
  .mu-contact__submit-row { gap: 20px; }
  .mu-contact__send { gap: 30px; padding-inline: 22px; }
  .mu-contact__note { font-size:.78rem; }
  .mu-contact__success { padding: 30px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .mu-contact input, .mu-contact select, .mu-contact textarea, .mu-contact__send, .mu-contact__reset { transition:none; }
}

/* journey.css */
/* Shared rhythm and transitions. Native page scroll, no scroll interception. */
:root { --section-space: clamp(70px, 8vw, 120px); --header-height: 60px; }
html { scroll-padding-top: 0; }
section[id] { scroll-margin-top: 0; }
#network { scroll-margin-top: 36px; }

.js-ready .reveal { transform: translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js-ready .reveal.is-visible { transform: none; }

/* Give the illustration its own space, including on shorter laptop screens. */
.hero { display: grid; grid-template-rows: minmax(0, 1fr) 230px; min-height: 770px; height: 100svh; max-height: 1060px; padding-top: var(--header-height); background: #050505; }
.hero-visual ~ .hero-content { grid-row: 1; align-self: center; padding: 38px 24px 18px; }
.hero h1 { font-size: clamp(52px, 6.1vw, 98px); }
.hero p { margin-block: 25px 27px; color: #c8c1b7; }
.hero-light { inset: -25% -12% 0; filter: none; background: radial-gradient(ellipse 68% 62% at 50% 0%, #ac6c36 0%, #5e351c 32%, #21150e 58%, transparent 83%); }
.hero-grain { background: linear-gradient(0deg,#050505,transparent 28%); }
.hero .memory-ribbon { width: min(116%, 1420px); bottom: -15px; max-height: 310px; }
.hero-visual { -webkit-mask-image: linear-gradient(#000 80%, transparent 100%); mask-image: linear-gradient(#000 80%, transparent 100%); }
.hero::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, #050505); pointer-events: none; }

/* Protect type over the map while preserving a full-bleed, continuous field. */
.network-section { height: 90svh; min-height: 740px; max-height: 1040px; }
.network-top { top: 65px; }
.network-copy { top: 135px; max-width: 610px; }
.network-copy h2 { font-size: clamp(34px, 3.65vw, 56px); }
.network-copy p { color: #b9b4ac; }
.network-stats { bottom: 110px; gap: clamp(80px, 12vw, 210px); }
.network-stats strong { font-size: clamp(70px, 8vw, 126px); }
.map-field:after { background: linear-gradient(0deg,#050505 0%,#050505d9 13%,#05050522 42%,transparent 62%,#050505 100%), linear-gradient(90deg,#050505a6 0%,#05050560 31%,transparent 65%); }
.network-section > .source-note { bottom: 35px; }

/* Restore six individual task tiles, with restrained staggered entrances. */
.diversity-section { padding: var(--section-space) 0 75px; }
.diversity-heading { align-items: flex-end; margin-block: 36px 30px; }
.diversity-heading h2 { font-size: clamp(46px, 5.4vw, 78px); }
.diversity-heading p { color: #aaa49a; font-size:1rem; line-height: 1.7; padding-bottom: 5px; }
.scene-grid { grid-template-columns: repeat(6,minmax(0,1fr)); max-width: 1120px; gap: 20px; padding-block: 12px 8px; }
.scene-tile:nth-child(even) { padding-top: 16px; }
.scene-tile .scene-image { aspect-ratio: 1; border-radius: 6px; }
.scene-tile .scene-atlas { transform: none; filter: saturate(.75) brightness(.9); }
.scene-tile .scene-title { font-size:.86rem; line-height: 1.4; margin-top: 12px; }
.scene-tile .scene-meta { font-size:.72rem; line-height: 1.5; color: #8f8980; }
.diversity-section > .source-note { width: calc(100% - var(--page)*2); max-width: 1120px; margin: 22px auto 0; }
@media(max-width:1100px) {
 .scene-grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 620px; gap: 24px 18px; }
 .scene-tile:nth-child(even) { padding-top: 0; }
}

/* One pace through quality, hardware, contribution and the final form. */
.quality-section { padding: var(--section-space) 0 70px; margin-top: 0; border-top: 0; }
.quality-section::before { content:''; position: absolute; top: 0; left: var(--page); right: var(--page); height: 1px; background: linear-gradient(90deg,#ffffff28, #ffffff08); }
.quality-statement { font-size: clamp(34px, 4.5vw, 66px); margin-top: 34px; }
.quality-statement .reading-word { transition:opacity .3s linear, transform .3s var(--ease); }
.pipeline-visual { height: clamp(320px, 35vw, 500px); border-color: #ffffff16; border-radius: 7px; }
.pipeline-tabs { gap: 28px; }
.pipeline-tabs > button { min-height: 58px; }
.pipeline-footer { margin-top: 14px; }
#pipeline-detail { min-height: 52px; }
.app-section { padding: 65px 0 65px; }
.app-previews { padding-bottom: 45px; }
.app-previews .ux3-c { transition:none; }
.app-previews .phone-frame .ux3-f { position: absolute; top: 0; left: 0; }
.app-intro { margin-bottom: 40px; }
.app-section .source-note { margin-top: 0; }
.mu-contact { padding-block: 65px 80px; }
.mu-contact__inner { padding-top: 56px; }
.site-footer { padding-block: 30px; }
@media(max-width:1100px) and (min-width:761px) {
 .hero h1 { font-size: clamp(50px, 6.2vw, 72px); }
 .network-stats strong { font-size: 78px; }
}
@media(max-width:760px) {
 :root { --header-height: 56px; --section-space: 66px; }
 #diversity, #quality { scroll-margin-top: 24px; }
 #contribute { scroll-margin-top: 64px; }
 .hero { height: 94svh; min-height: 680px; max-height: 880px; grid-template-rows: minmax(0,1fr) 155px; }
 .hero-visual ~ .hero-content { padding: 16px 20px 6px; }
 .hero h1 { font-size: clamp(38px, 9.7vw, 58px); line-height: 1.07; }
 .hero p { max-width: 30ch; margin-block: 23px 25px; font-size:.86rem; }
 .upload-logo { margin-bottom: 26px; }
 .hero .memory-ribbon { width: 720px; max-width: none; max-height: none; bottom: -20px; }
 .hero-light { inset: -10% -20% 0; background: radial-gradient(ellipse 100% 58% at 50% 0%,#a96b35,#532f1a 35%,#1a110c 68%,transparent); }
 .network-section { height: 690px; min-height: 0; }
 .network-top { top: 45px; }
 .network-copy { top: 106px; }
 .network-copy h2 { font-size: clamp(29px, 8.3vw, 40px); }
 .network-copy p { max-width: 28ch; line-height: 1.6; }
 .network-stats { bottom: 90px; gap: 24px; }
 .network-stats strong { font-size: clamp(33px,10.3vw,67px); }
 .network-stats > div > span { white-space: normal; max-width: 16ch; min-height: 25px; font-size:.72rem; line-height: 1.5; }
 .map-field { inset: 80px -12% 0; }
 .uplm-map { top: 46%; width: 210%; }
 .network-section > .source-note { bottom: 28px; max-width: 35ch; }
 .diversity-section { padding-bottom: 55px; }
 .diversity-heading { margin-top: 29px; margin-bottom: 5px; }
 .diversity-heading h2 { font-size: clamp(39px,10.7vw,59px); }
 .diversity-heading p { margin-top: 20px; font-size:.92rem; }
 .diversity-heading p br { display: none; }
 .quality-section { padding-bottom: 48px; }
 .quality-statement { font-size: clamp(27px,7.1vw,46px); margin-top: 28px; max-width: 24ch; }
 .pipeline-visual { height: 340px; }
 .pipeline-tabs { gap: 12px; }
 .pipeline-tabs > button { gap: 8px; }
 .pipeline-tabs > button strong { font-size: 18px; }
 #pipeline-detail { min-height: 74px; }
 .app-section { padding: 35px 0 40px; }
 .app-intro h2 { font-size: clamp(35px,9.5vw,48px); }
 .app-previews { padding-bottom: 14px; }
 .app-previews .ux3 { gap: 18px!important; }
 .mu-contact { padding-block: 35px 65px; }
 .mu-contact__inner { padding-top: 40px; }
 .site-footer > div:last-child { width: 100%; }
}
@media(max-width:370px) {
 .hero-visual ~ .hero-content { padding-inline: 12px; }
 .hero h1 { font-size: 36px; }
 .hero-actions .button { min-width: 126px; padding-inline: 14px; }
 .network-stats { gap: 14px; }
 .pipeline-tabs > button strong { font-size:1rem; }
 .pipeline-visual { height: 310px; }
}
@media(max-height:620px) and (min-width:761px) {
 .hero { min-height: 640px; grid-template-rows: minmax(0,1fr) 160px; }
 .hero .memory-ribbon { bottom: -110px; }
}
@media(prefers-reduced-motion:reduce) {
 .js-ready .reveal { opacity: 1; transform: none; }
 .hero-visual { transform: none; }
}

.pipeline-visual > img { transform: none!important; object-position: 50% 62%; }
.network-section[data-motion-active="false"] .uplm-h * { animation-play-state: paused; }

/* Phase changes dissolve; interaction pauses the sequence without extra UI. */
.pipeline-footer { display: block; }
#pipeline-detail { max-width: 68ch; }
.annotation-box { transition:opacity .6s var(--ease), transform .9s var(--ease); }
.delivery-sheet { transition:opacity .6s var(--ease), transform .9s var(--ease); }

@media(max-width:760px) {
 .scene-grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 560px; gap: 22px 12px; }
 .scene-tile .scene-title { font-size:.82rem; margin-top: 10px; }
 .scene-tile .scene-meta { font-size:.68rem; }
}
@media(max-width:450px) {
 .scene-grid { gap: 20px 10px; }
 .scene-tile .scene-title { font-size:.78rem; }
 .scene-tile .scene-meta { display: none; }
 .scene-tile .scene-index { bottom: 7px; left: 8px; font-size:.68rem; }
}

/* map.css */
/* The section owns the fixed background and feather; only map content drifts. */
.network-section {
  --map-background: #050505;
  background: var(--map-background);
}
.network-section .map-field {
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--map-background);
  transform: none;
  will-change: auto;
  /* This mask meets the actual section edges at every viewport size. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 74%, transparent 98%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 74%, transparent 98%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.network-section .production-map-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: var(--map-background);
  isolation: isolate;
}
.network-section .uplm-stage {
  inset: 0;
  overflow: visible;
}
.network-section .uplm-map {
  background: none;
  filter: none;
  opacity: 1;
  /* Blend the whole transformed group into the fixed backing, not into a transparent child group. */
  mix-blend-mode: screen;
  animation: uplmDrift 40s ease-in-out infinite alternate;
  animation-play-state: paused;
  transform: translate(-50%, -50%);
}
.network-section .uplm-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('6ac2af04c9e7cc4f14448401_upload-global-map-v2.webp') center / 100% 100% no-repeat;
  /* The source's #111 backdrop becomes black, then disappears in the parent's screen blend. */
  filter: grayscale(1) contrast(1.2) brightness(.94);
  mix-blend-mode: normal;
  opacity: .9;
  /* A narrow guard softens the source image's cropped geographic edges. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}
.network-section .map-field::after {
  /* This copy-protection gradient is stationary and shares the same painted backdrop. */
  background: linear-gradient(180deg, #050505 0%, #050505cc 14%, #0505051a 36%, transparent 53%, #05050566 75%, #050505 97%), linear-gradient(90deg, #05050580, transparent 38%, transparent 80%, #05050540);
}
.network-section .map-latitudes { opacity: .32; }
.network-section .uplm-h { z-index: 1; }
.network-section .uplm-h i {
  width: 8px;
  height: 8px;
  left: -4px;
  top: -4px;
  background: #ff9a3c;
  box-shadow: 0 0 12px 3px #ff8a28b3;
  opacity: 1;
  animation: none;
}
.network-section .uplm-h b {
  width: 28px;
  height: 28px;
  left: -14px;
  top: -14px;
  border: 1.5px solid #ff963ccc;
  background: none;
  animation: uplmPulse 2.6s ease-out infinite;
  animation-play-state: paused;
}
.network-section .uplm-h u {
  display: block;
  width: 2px;
  height: 180px;
  left: -1px;
  bottom: 0;
  transform-origin: center bottom;
  background: linear-gradient(0deg, #ff9a3ce6, #ff9a3c00);
  opacity: 0;
  animation: uplmBeam 7.2s ease-out infinite;
  animation-play-state: paused;
}
.network-section[data-motion-active="true"] .uplm-map,
.network-section[data-motion-active="true"] .uplm-h b,
.network-section[data-motion-active="true"] .uplm-h u { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .network-section .uplm-map { animation: none; transform: translate(-50%, -50%); }
  .network-section .uplm-h i { box-shadow: 0 0 8px 2px #ff8a2840; opacity: .7; }
  .network-section .uplm-h b,
  .network-section .uplm-h u { display: none; animation: none; }
}

/* quality-motion.css */
/* Native-scroll emphasis: color changes only, with no movement of the headline. */
.quality-statement .reading-word {
  color: var(--word-color, #555);
  opacity: 1;
  transform: none;
  transition:color .3s linear;
}
.quality-statement .reading-word:first-child { color: #f1eee8; }

/* The selected phase is identified by type and a small marker, without a timer bar. */
.pipeline-tabs > button::before,
.pipeline-tabs > button::after { content: none; display: none; }
.pipeline-tabs > button { color: #77736d; transition:color .45s var(--ease); }
.pipeline-tabs > button[aria-selected="true"] { color: #f1eee8; }
.pipeline-tabs > button > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #77736d;
  transition:color .45s var(--ease);
}
.pipeline-tabs > button > span::before {
  content: '';
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: #eaa268;
  opacity: 0;
  transition:opacity .45s var(--ease);
}
.pipeline-tabs > button[aria-selected="true"] > span { color: #eaa268; }
.pipeline-tabs > button[aria-selected="true"] > span::before { opacity: 1; }
.pipeline-visual[data-stage] .scanline { display: none; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .quality-statement .reading-word { color: #f1eee8; transition:none; }
}

/* Scroll-driven pipeline (app.js): the workspace pins and a runway below it sets the stage. */
.pipeline-runway { display: none; }
.quality-section.is-scrubbed .pipeline-workspace { position: sticky; z-index: 1; }
.quality-section.is-scrubbed .pipeline-runway { display: block; height: 240svh; }
/* Leave room for the tabs and stage copy inside one screen. */
.quality-section.is-scrubbed .pipeline-visual { max-height: max(320px, calc(100svh - 280px)); }
/* Each tab carries a hairline that fills as its stage is scrolled through. */
.quality-section.is-scrubbed .pipeline-tabs > button::before,
.quality-section.is-scrubbed .pipeline-tabs > button::after {
  content: ''; display: block; position: absolute; left: 0; top: auto; bottom: 0; width: 100%; height: 1px;
  background: #ffffff24;
}
.quality-section.is-scrubbed .pipeline-tabs > button::after {
  background: var(--accent);
  transform-origin: left; transform: scaleX(var(--fill, 0));
  transition:transform .3s linear;
}
/* Stage layers arrive one piece at a time: hand, object, then the task labels. */
.pipeline-visual[data-stage="2"] .annotation-box.object { transition-delay: .12s; }
.pipeline-visual[data-stage="2"] .dash-tasks { transition-delay: .24s; }

/* refinement.css */
/* Final type and timing layer. Ambient cycles keep their existing pacing. */
@font-face {
  font-family: Manrope;
  src: url('6adfa5df4505005406eafeae_mu-manrope-600.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
:root {
  --motion-reveal: .9s var(--ease);
  --motion-interaction: .3s var(--ease);
  --caption-color: #aaa69f;
}

.hero h1,
.network-copy h2,
.diversity-heading h2,
.quality-statement,
.mu-hardware .hw-intro h2,
.mu-hardware .mx-text h3,
.app-intro h2,
.mu-contact h2,
.mu-contact__success h3,
.delivery-sheet strong { font-weight: 500; }

.button,
.nav-actions .button,
.pipeline-tabs > button,
.pipeline-tabs > button strong,
.mu-hardware .mx-tabs button,
.mu-contact__send,
.mu-contact__reset { font-weight: 500; }

/* Use the supplied 600 weight for small labels. */
.section-label,
.network-top.section-label,
.network-stats > div > span,
.mu-hardware .hw-eyebrow,
.mu-contact__eyebrow,
.mu-contact label,
.delivery-eyebrow,
.media-top,
.pipeline-tabs > button > span,
.scene-tile .scene-index {
  font-size:.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.5;
}
.section-label,
.network-top.section-label,
.network-stats > div > span,
.mu-hardware .hw-eyebrow,
.mu-contact__eyebrow { color: var(--caption-color); }
.mu-contact label > span {
  color: var(--caption-color);
  font-size:.82rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* These are page captions; the scaled production app previews retain their UI. */
.source-note,
.network-section > .source-note,
.diversity-section > .source-note,
.app-section .source-note,
.scene-tile .scene-meta,
.media-note,
.delivery-line,
.mu-contact__note,
.mu-hardware .hw-interaction-hint,
.site-footer,
.site-footer .prototype-label {
  font-size:.82rem;
  color: var(--caption-color);
  line-height: 1.55;
}
.scene-tile .scene-title { font-size:.86rem; font-weight: 500; }
.delivery-sheet > div > span { font-size: 11px; line-height: 1.5; }
.app-previews .ux3-cap { font-size: 12px !important; color: var(--caption-color) !important; }

/* Entrances share a short, bounded lift. No heading travels by its full height. */
.js-ready .reveal {
  transform: translateY(20px);
  transition:opacity var(--motion-reveal), transform var(--motion-reveal);
  transition-delay: 0s;
}
.js-ready .reveal.is-visible { transform: none; }
.js-ready .scene-tile.reveal {
  transition-delay: min(calc(var(--tile-index, 0) * 40ms), 160ms) !important;
}
.hero .line > span,
.hero p,
.hero-actions { animation: refinement-enter var(--motion-reveal) both; }
.hero .line:nth-child(2) > span { animation-delay: 60ms; }
.hero p { animation-delay: 100ms; }
.hero-actions { animation-delay: 160ms; }
.memory-sheet {
  animation: memory-trace var(--motion-reveal) both;
  animation-delay: min(var(--delay, 0ms), 180ms);
}
@keyframes refinement-enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.app-previews .ux3-c { transform: translateY(clamp(0px, var(--phone-y, 0px), 24px)); }

/* Pipeline changes use the quick interaction pace; chapter reveals stay separate. */
.pipeline-visual > img { transition:filter var(--motion-interaction); }
.pipeline-visual :is(.dash,.annotation-box,.delivery-sheet) {
  transition:opacity var(--motion-interaction), transform var(--motion-interaction);
}
.pipeline-visual :is(.dash,.annotation-box,.delivery-sheet)[aria-hidden="true"] { transform:translateX(16px); }
.pipeline-visual :is(.dash,.annotation-box,.delivery-sheet).is-leaving[aria-hidden="true"] { transform:translateX(-16px); }
.mu-hardware .mx-layer { transition:opacity var(--motion-reveal), transform var(--motion-reveal); }
@media(prefers-reduced-motion:reduce) {
 .pipeline-visual > img,
 .pipeline-visual :is(.dash,.annotation-box,.delivery-sheet) { transition:none; }
}
.mu-hardware .mx-gl,
.mu-hardware .mx-text { transition:opacity var(--motion-reveal); }

.button {
  transition:background var(--motion-interaction), border-color var(--motion-interaction), box-shadow var(--motion-interaction), transform var(--motion-interaction);
}
.pipeline-tabs > button,
.pipeline-tabs > button > span,
.quality-statement .reading-word { transition:color var(--motion-interaction); }
.pipeline-tabs > button > span::before { transition:opacity var(--motion-interaction); }
.button-icon svg { transition:transform var(--motion-interaction); }
.mu-hardware .mx-tabs button { transition:color var(--motion-interaction), background var(--motion-interaction), border-color var(--motion-interaction); }
.mu-contact input,
.mu-contact select,
.mu-contact textarea,
.mu-contact__send,
.mu-contact__reset { transition:border-color var(--motion-interaction), background var(--motion-interaction); }

@media (max-width: 760px) {
  .scene-tile .scene-title { font-size:.82rem; }
  .section-label > span { min-width: 0; }
  .section-label > span:last-child { text-align: left; }
  .network-stats > div > span { min-height: 3em; }
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal { opacity: 1; transform: none; transition:none; }
  .js-ready .scene-tile.reveal { transition-delay: 0s !important; }
  .hero .line > span,
  .hero p,
  .hero-actions,
  .memory-sheet { animation: none; }
  .app-previews .ux3-c { transform: none; }
}

/* diversity.css */
/* Long tail of human skill: a ranked distribution drawn from real Upload footage frames. */
.diversity-section { padding: clamp(60px, 7vw, 100px) 0 54px; }
.skill-tail { max-width: 1120px; margin-top: 34px; }
.skill-tail__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.skill-tail__head h2 {
  font-size: clamp(42px, 4.6vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.04em;
}
.skill-tail__head p {
  max-width: 34ch;
  padding-bottom: 6px;
  color: #aaa49a;
  font-size:1rem;
  line-height: 1.65;
}

.skill-tail__chart {
  position: relative;
  margin-top: clamp(44px, 5vw, 72px);
  touch-action: pan-y;
  cursor: crosshair;
}
.skill-tail__canvas { display: block; width: 100%; height: 380px; }

.skill-tail__readout {
  position: absolute;
  right: 0; top: 0;
  display: grid;
  gap: 6px;
  min-width: 15ch;
  text-align: right;
  pointer-events: none;
}
.skill-tail__task {
  color: #f6f5f2;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.skill-tail__place { color: #ff913d; font-size:.92rem; }
.skill-tail__readout.is-swapping > * { opacity: 0; transform: translateY(6px); }
.skill-tail__readout > * { transition:opacity .45s var(--ease), transform .45s var(--ease); }

.skill-tail__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #ffffff1f;
  color: #8c8b88;
  font-size:.82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* The axis reads without an arrow. */

.diversity-section .skill-tail > .source-note { width: auto; max-width: none; margin: 18px 0 0; text-align: left; }

@media (max-width: 760px) {
  .skill-tail { margin-top: 26px; }
  .skill-tail__head { display: block; }
  .skill-tail__head h2 { font-size: clamp(38px, 10.5vw, 52px); }
  .skill-tail__head p { margin-top: 18px; font-size:.97rem; }
  .skill-tail__chart { margin-top: 30px; }
  .skill-tail__canvas { height: 300px; }
  .skill-tail__task { font-size: 24px; }
  .skill-tail__place { font-size:.86rem; }
  .skill-tail__axis { font-size:.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .skill-tail__readout > * { transition:none; }
}

/* hero-motion.css */
/* Slow, decorative motion for the existing vector ribbon only. */
.hero .memory-sheet {
  animation: memory-trace 2.8s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: min(var(--delay, 0ms), 180ms);
}
.hero[data-ribbon-motion] .memory-frame {
  transform-box: fill-box;
  transform-origin: center;
  transform:
    translate(
      calc(var(--hero-progress, 0) * var(--spread) * 7px + var(--frame-motion-x, 0px)),
      calc(var(--hero-progress, 0) * var(--rise) * 3px + var(--frame-motion-y, 0px))
    )
    rotate(var(--frame-motion-turn, 0deg));
  opacity: var(--frame-motion-opacity, var(--frame-opacity));
}
.hero[data-ribbon-motion] .memory-sheet {
  stroke: rgb(var(--frame-motion-color, 223 202 187));
  stroke-width: calc(.85px + var(--frame-signal, 0) * .3px);
}
.hero[data-ribbon-motion] .memory-frame--focus .memory-sheet {
  stroke-width: calc(1px + var(--frame-signal, 0) * .2px);
}
.hero[data-ribbon-motion] .capture-corners {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--ribbon-bracket-scale, 1));
  opacity: var(--ribbon-bracket-opacity, .7);
}
.hero[data-ribbon-motion] .capture-point {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--ribbon-point-scale, 1));
  opacity: var(--ribbon-point-opacity, 1);
}
.hero[data-ribbon-motion="paused"] .memory-sheet {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .hero .memory-sheet { animation: none; }
  .hero[data-ribbon-motion] .memory-frame { transform: none; opacity: var(--frame-opacity); }
  .hero[data-ribbon-motion] .memory-frame--focus { opacity: 1; }
  .hero[data-ribbon-motion] .memory-sheet { stroke: #dfcabb; stroke-width: .85px; }
  .hero[data-ribbon-motion] .memory-frame--focus .memory-sheet { stroke: #f3aa6d; stroke-width: 1px; }
  .hero[data-ribbon-motion] .capture-corners { transform: none; opacity: .7; }
  .hero[data-ribbon-motion] .capture-point { transform: none; opacity: 1; }
}

/* solution-system.css */
/* Typography and rhythm adapted from memories.ai/solution; V3 palette and nav stay intact. */
:root { --section-space: clamp(80px, 7.64vw, 104px); }
.container { max-width: 1240px; }
.mu-contact__inner { max-width: 1240px; }

.hero h1 {
  font-size: clamp(56px, 6.944vw, 88px);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -.03em;
}
.network-copy h2,
.quality-statement,
.app-intro h2,
.mu-contact h2 {
  font-size: clamp(44px, 4.514vw, 60px);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -.03em;
}
/* The orbit center and hardware stage keep their independently fitted sizes. */
.diversity-orbit__intro h2,
.mu-hardware .hw-intro h2,
.mu-hardware .mx-text h3 { letter-spacing: -.03em; }
.hero p,
.network-copy p,
.diversity-orbit__intro p,
.mu-contact__intro {
  font-size:1.05rem;
  font-weight: 400;
  line-height: 1.37;
  letter-spacing: -.03em;
}
.hero p { max-width: 40ch; margin-top: 24px; margin-bottom: 28px; }
.network-copy p { margin-top: 20px; }
.app-intro h2 { margin-top: 24px; }

.diversity-section { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.quality-section { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.app-section { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.mu-contact { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.mu-contact__inner { padding-top: 48px; }

@media (max-width: 760px) {
  :root { --section-space: 64px; }
  .hero h1 { font-size: clamp(34px, 9.75vw, 48px); line-height: 1.05; }
  .network-copy h2,
  .quality-statement,
  .app-intro h2,
  .mu-contact h2 { font-size: clamp(34px, 9.74vw, 38px); line-height: 1.08; }
  .hero p { max-width: 34ch; }
  .network-copy p { max-width: 29ch; }
  .diversity-orbit__intro p { max-width: 28ch; }
  .mu-contact__inner { padding-top: 40px; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: 32px; }
  .network-copy h2,
  .quality-statement,
  .app-intro h2,
  .mu-contact h2 { font-size: 32px; }
}

/* deliver.css */
/* Data Lake illustration. Shares the pipeline's stage clock and interaction pause. */
.delivery-sheet.dl-workspace { --dl-ease: cubic-bezier(.22,1,.36,1); inset: 0; padding: 0; display: grid; grid-template-rows: 45px minmax(0,1fr) 27px; justify-content: stretch; background: #111213; color: #eae9e6; font-size: 12px; line-height: 1.4; transform: translateX(16px); transition:opacity .3s var(--dl-ease) var(--ease), transform .3s var(--dl-ease) var(--ease); }
.pipeline-visual[data-stage="3"] .dl-workspace { pointer-events: auto; transform: none; }
.dl-workspace *, .dl-workspace *::before, .dl-workspace *::after { box-sizing: border-box; }
.dl-workspace strong { font: inherit; font-weight: 500; line-height: inherit; letter-spacing: 0; margin: 0; }
.dl-workspace svg { flex: 0 0 auto; width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.dl-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 22px; border-bottom: 1px solid #ffffff0e; background: #151617; }
.dl-brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.dl-brand > svg { width: 20px; height: 20px; color: #d1b394; }
.dl-brand strong { font-size: 13px; color: #f0eeea; }
.dl-divider { margin-inline: 7px; color: #a2a29c; }
.dl-location { font-size: 11px; color: #a3a4a2; }
.dl-preview-badge { font-size: 11px; color: #a2a29c; letter-spacing: .01em; }
.delivery-sheet.dl-workspace > .dl-body { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); grid-template-rows: 42px minmax(0,1fr); gap: 16px 22px; padding: 16px 22px 15px; min-height: 0; }
.dl-query { display: flex; align-items: center; grid-column: 1/-1; gap: 11px; padding: 0 13px; border: 1px solid #ffffff1b; border-radius: 5px; background: #1a1b1c; color: #e3e1dc; min-width: 0; }
.dl-query > svg { color: #a2a29c; width: 15px; height: 15px; }
.dl-query > span:first-of-type { font-size: 12px; letter-spacing: -.01em; }
.dl-query-type { margin-left: auto; padding-left: 15px; color: #a2a29c; font-size: 11px; white-space: nowrap; }
.dl-result { margin: 0; display: grid; grid-template-rows: minmax(0,1fr) 31px; gap: 8px; min-width: 0; min-height: 0; }
.dl-clip { position: relative; overflow: hidden; border: 1px solid #ffffff12; border-radius: 4px; min-height: 0; background: #272522; }
.dl-clip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#000b,transparent 65%,#0005); pointer-events: none; }
.dl-clip > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: saturate(.65) brightness(.86); display: block; }
.dl-clip-top { position: absolute; z-index: 1; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #e8e4dd; font-size: 11px; }
.dl-clip-top i { display: inline-block; width: 4px; height: 4px; background: #dab285; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.dl-clip figcaption { position: absolute; z-index: 1; bottom: 12px; left: 12px; display: flex; flex-direction: column; gap: 3px; }
.dl-clip figcaption strong { font-size: 13px; }
.dl-clip figcaption > span { color: #c8c3bb; font-size: 11px; }
.dl-timeline { position: relative; overflow: hidden; border-radius: 3px; border: 1px solid #ffffff15; background: #1d1e1e; }
.dl-filmstrip { height: 100%; display: flex; gap: 2px; opacity: .7; }
.dl-filmstrip i { flex: 1; background: linear-gradient(#0004,#0004),url('6adfa5e1b5425a4cc8101a9e_mu-pov-kitchen.png') 50% 62%/cover; }
.dl-filmstrip i:nth-child(2) { background-position: 43% 58%; }
.dl-filmstrip i:nth-child(4) { background-position: 57% 65%; }
.dl-filmstrip > span { position: absolute; inset: 0 22% 0 24%; border: 1px solid #d6b388; border-left-width: 3px; border-right-width: 3px; background: #d5af7311; }
.dl-timeline-label { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: center; gap: 5px; padding-inline: 8px; color: #f3ece1; background: linear-gradient(90deg,transparent,#171817c9); font-size: 11px; }
.dl-timeline-label svg { width: 10px; height: 10px; }
.dl-package { min-width: 0; min-height: 0; display: grid; grid-template-rows: 24px 31px minmax(0,1fr) 22px; }
.dl-package-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dl-package-heading h3 { margin: 0; font-size: 13px; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; }
.dl-package-heading > span { display: flex; align-items: center; gap: 4px; color: #a4afa2; font-size: 11px; white-space: nowrap; }
.dl-package-heading svg { width: 12px; height: 12px; }
.dl-tabs { display: flex; align-items: stretch; gap: 17px; border-bottom: 1px solid #ffffff12; }
.dl-tabs > button { appearance: none; padding: 0 0 8px; margin: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; color: #a2a29c; font: inherit; font-size: 11px; line-height: 1.5; cursor: pointer; white-space: nowrap; transition:color .3s var(--dl-ease) var(--ease), border-color .3s var(--dl-ease) var(--ease); }
.dl-tabs > button[aria-selected="true"] { color: #ede7de; border-bottom-color: #d1b394; }
.dl-tabs > button:hover { color: #fff; }
.dl-tabs > button:focus-visible, .dl-panel:focus-visible { outline: 1px solid #d1b394; outline-offset: 3px; }
.dl-panels { position: relative; min-height: 0; overflow: hidden; }
.dl-panel { padding: 12px 0 7px; height: 100%; min-height: 0; animation: dl-output-in .25s var(--dl-ease) both; }
.dl-panel[hidden] { display: none; }
.dl-field-name { display: block; color: #a2a29c; font-size: 11px; margin-bottom: 6px; letter-spacing: .03em; }
.dl-panel p { margin: 0; color: #d9d7d1; font-size: 13px; line-height: 1.65; max-width: 43ch; }
.dl-tags { display: flex; gap: 5px; margin-top: 10px; }
.dl-tags > span { font-size: 11px; padding: 3px 6px; color: #a3a69f; border: 1px solid #ffffff12; border-radius: 3px; }
.dl-package-footer { display: flex; align-items: flex-end; gap: 6px; color: #a2a29c; font-size: 11px; white-space: normal; line-height: 1.4; }
.dl-package-footer svg { width: 12px; height: 12px; color: #b59f86; }
.dl-action-fields { display: grid; gap: 9px; margin: 0; }
.dl-action-fields > div { display: grid; grid-template-columns: 75px 1fr; gap: 10px; font-size: 13px; }
.dl-action-fields dt { color: #a2a29c; }
.dl-action-fields dd { color: #d7d9d0; margin: 0; }
.dl-pose-panel { display: flex; align-items: center; gap: 9px; }
.dl-pose-panel .dl-hand-pose { width: 42%; max-width: 150px; height: 100%; max-height: 105px; color: #d1b394; stroke: none; background: radial-gradient(ellipse,#b5946814,transparent 70%); }
.dl-pose-panel p { font-size: 13px; line-height: 1.55; }
.dl-pose-note { display: block; margin-top: 6px; font-size: 11px; color: #a2a29c; }
.dl-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #ffffff0b; padding-inline: 22px; color: #a2a29c; font-size: 11px; }
.dl-workspace ~ .media-note { visibility: visible; transition:opacity .3s var(--dl-ease) var(--ease); }
.pipeline-visual[data-stage="3"] .dl-workspace ~ .media-note { opacity: 0; visibility: hidden; }
.dl-query, .dl-result, .dl-package { opacity: 0; transform: translateX(12px); transition:opacity .3s var(--dl-ease) var(--ease), transform .3s var(--dl-ease) var(--ease); }
.pipeline-visual[data-stage="3"] .dl-query, .pipeline-visual[data-stage="3"] .dl-result, .pipeline-visual[data-stage="3"] .dl-package { opacity: 1; transform: none; }
@keyframes dl-output-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media(min-width:761px) and (max-width:1000px) {
 .pipeline-visual:has(.dl-workspace) { min-height: 380px; }
 .dl-package-heading > span { display: none; }
 .delivery-sheet.dl-workspace > .dl-body { gap: 12px 16px; padding: 13px 17px; grid-template-rows: 35px minmax(0,1fr); }
 .dl-panel { padding-top: 9px; }
 .dl-tags { margin-top: 7px; }
 .dl-tabs { gap: 11px; }
}
@media(max-width:760px) {
 /* Stable height through all four stages, sized for readable output. */
 .pipeline-visual:has(.dl-workspace) { height: 480px; }
 .delivery-sheet.dl-workspace { grid-template-rows: 44px minmax(0,1fr) 28px; }
 .dl-header { padding-inline: 12px; }
 .dl-brand { gap: 7px; }
 .dl-brand > svg { width: 17px; height: 17px; }
 .dl-brand strong { font-size: 13px; }
 .dl-location { font-size: 11px; }
 .dl-preview-badge { display: none; }
 .dl-divider { margin-inline: 2px; }
 .delivery-sheet.dl-workspace > .dl-body { grid-template-columns: minmax(0,1fr); grid-template-rows: 44px 125px minmax(0,1fr); padding: 12px; gap: 11px; }
 .dl-query { padding-inline: 9px; gap: 8px; }
 .dl-query > span:first-of-type { font-size: 12px; }
 .dl-query-type { display: none; }
 .dl-result { grid-template-rows: minmax(0,1fr); grid-template-columns: minmax(0,1fr) 42px; gap: 6px; }
 .dl-clip > img { object-position: 50% 58%; }
 .dl-clip-top { top: 7px; left: 8px; right: 8px; font-size: 11px; }
 .dl-clip figcaption { bottom: 7px; left: 8px; gap: 0; }
 .dl-clip figcaption strong { font-size: 12px; }
 .dl-clip figcaption > span { font-size: 11px; }
 .dl-filmstrip { flex-direction: column; }
 .dl-filmstrip i:nth-child(n+4) { display: none; }
 .dl-filmstrip > span { inset: 18% 0 16%; border-width: 2px 1px; }
 .dl-timeline-label { display: none; }
 .dl-package { grid-template-rows: 24px 44px minmax(0,1fr); }
 .dl-package-heading h3 { font-size: 12px; }
 .dl-package-heading > span { font-size: 11px; }
 .dl-package-heading svg { width: 10px; height: 10px; }
 .dl-tabs { gap: 18px; }
 .dl-tabs > button { min-height: 44px; min-width: 44px; font-size: 11px; padding: 8px 0; }
 .dl-panel { padding: 8px 0 0; }
 .dl-field-name { font-size: 11px; margin-bottom: 3px; }
 .dl-panel p { font-size: 12px; line-height: 1.5; max-width: none; }
 .dl-tags, .dl-package-footer { display: none; }
 .dl-action-fields { gap: 4px; }
 .dl-action-fields > div { font-size: 12px; grid-template-columns: 65px 1fr; }
 .dl-pose-panel { padding-top: 3px; gap: 10px; }
 .dl-pose-panel .dl-hand-pose { max-width: 100px; width: 38%; }
 .dl-pose-panel p { font-size: 12px; }
 .dl-pose-note { font-size: 11px; margin-top: 3px; }
 .dl-footer { padding-inline: 12px; font-size: 11px; }
 .dl-footer > span:first-child { display: none; }
 .dl-footer > span:last-child { margin-left: auto; }
}
@media(max-width:370px) {
 .delivery-sheet.dl-workspace > .dl-body { padding-inline: 10px; }
 .dl-location, .dl-divider { display: none; }
}
@media(prefers-reduced-motion:reduce) {
 .delivery-sheet.dl-workspace, .dl-query, .dl-result, .dl-package { transition:none; transform: none; }
 .dl-panel { animation: none; }
}

/* story.css */
/* Chapters share an entrance rhythm; all scrolling and ongoing scenes stay native. */
.mu-hardware { padding-top:var(--section-space); }
.mu-hardware .mx-sticky { padding-top:38px; }
/* LUCI Pin rhythm: a long, soft rise; headings also come into focus. */
html.story-ready main .story-enter {
  opacity:.25;
  translate:0 40px;
  transition:opacity 1.2s var(--ease), translate 1.2s var(--ease);
  transition-delay:var(--story-delay,0ms);
}
html.story-ready main h2.story-enter { filter:none; }
html.story-ready main .story-enter.is-arrived { opacity:1; translate:0 0; }
main > .story-chapter { position:relative; isolation:isolate; }
.chapter-aura { position:absolute; z-index:-1; pointer-events:none; inset:0 0 auto; height:300px; background:radial-gradient(ellipse at 50% 0,#c58e5412,transparent 67%); -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 80%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 80%,transparent 100%); opacity:0; transition:opacity .6s cubic-bezier(.22,1,.36,1); }
.story-chapter[data-story-state="entering"] > .chapter-aura,
.story-chapter[data-story-state="current"] > .chapter-aura { opacity:1; }
.story-guide {
  position:fixed; z-index:40; left:50%; bottom:max(22px,env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:12px;
  background:none; color:#e8e4dc;
  opacity:0; visibility:hidden; translate:0 8px; pointer-events:none; text-decoration:none;
  transition:opacity .3s cubic-bezier(.22,1,.36,1), translate .3s cubic-bezier(.22,1,.36,1), visibility .3s var(--ease);
}
.story-guide.is-visible { opacity:1; visibility:visible; translate:0 0; pointer-events:auto; }
.story-guide svg { width:14px; height:22px; fill:none; stroke:#c8a77e; stroke-width:1.2; transition:translate .3s cubic-bezier(.22,1,.36,1); }
.story-guide:hover svg { translate:0 3px; }
.story-guide:focus-visible { outline:1px solid #c8a77e; outline-offset:3px; }
@media(max-width:760px) {
 .mu-hardware .mx-sticky { padding-top:30px; }
 .story-guide { bottom:max(14px,env(safe-area-inset-bottom)); }
 .chapter-aura { height:200px; }
}
@media(prefers-reduced-motion:reduce) {
 html.story-ready main .story-enter { opacity:1; translate:none; filter:none; transition:none; }
 .chapter-aura, .story-guide, .story-guide svg { transition:none; translate:none; }
}

/* navigation-brand.css */
/* Landing navigation: LUCI Pin floating glass pill, section links and Contact, sized to its content. */
.site-header {
  --nav-ease: cubic-bezier(.22,1,.36,1);
  --nav-quint: cubic-bezier(.83,0,.17,1);
  position: fixed;
  z-index: 100;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 22px);
  transform: translateX(-50%);
  width: min(calc(100% - 48px), 1120px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 14px;
  border-radius: 99px;
  background: #00000059;
  border: 1px solid #ffffff12;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  color: #fff;
}
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header.scrolled { background: #000000bf; }
.site-header.is-hidden { transform: translate(-50%, calc(-100% - 40px)); }
.site-header:has(:focus-visible), .site-header.is-menu-open { transform: translateX(-50%); }

.site-header .brand { display: flex; align-items: center; flex: 0 0 auto; min-height: 38px; border-radius: 8px; transition:opacity .3s var(--ease); }
.site-header .brand:hover { opacity: .82; }
.site-header .brand img { display: block; width: auto; height: 21px; }

.site-header .nav-links { display: flex; gap: 2px; }
.site-header .nav-links > a { padding: 8px 14px; border-radius: 99px; font-size:.97rem; color: #ffffffbf; white-space: nowrap; transition:color .3s var(--ease), background .3s var(--ease); }
.site-header .nav-links > a:hover { color: #fff; background: #ffffff14; }
.site-header .nav-links > a[aria-current] { color: #fff; background: #ffffff1f; }

.site-header .nav-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* While the hero shows the same CTAs, the nav's pair steps back and its space collapses. On desktop the
   pill also narrows to the logo and links (navigation.js sets --nav-tight), then widens as the hero
   copy lifts away. Buttons fade out before the pill narrows, and in after it widens. */
.site-header { transition:transform .45s var(--nav-ease) var(--ease), background .45s var(--ease), width .6s var(--nav-ease) .12s var(--ease); }
.site-header.is-settling, .site-header.is-settling * { transition:none !important; }
.site-header.is-tight { width: var(--nav-full, min(calc(100% - 48px), 1120px)); gap: 18px; }
.site-header.has-hero-ctas.is-tight { width: var(--nav-tight); transition-delay: 0s, 0s, .18s; }
.site-header .nav-actions {
  max-width: 420px; overflow: clip; overflow-clip-margin: 6px;
  transition:max-width .6s var(--nav-ease) .12s var(--ease);
}
.site-header.has-hero-ctas .nav-actions { max-width: 0; transition-delay: .18s; }
.site-header .nav-actions > .nav-button { transition:background .45s var(--nav-ease) var(--ease), color .45s var(--nav-ease) var(--ease), border-color .45s var(--nav-ease) var(--ease), transform .45s var(--nav-ease) var(--ease), opacity .45s var(--nav-ease) .3s var(--ease), translate .45s var(--nav-ease) .3s var(--ease), visibility 0s; }
.site-header.has-hero-ctas .nav-actions > .nav-button { opacity: 0; translate: 0 -6px; visibility: hidden; pointer-events: none; transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, .45s; }
.site-header .nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 99px;
  font-size:.97rem;
  white-space: nowrap;
  transition:background .45s var(--nav-ease) var(--ease), color .45s var(--nav-ease) var(--ease), border-color .45s var(--nav-ease) var(--ease), transform .45s var(--nav-ease) var(--ease);
}
.site-header .nav-button:active { transform: scale(.97); }
.site-header .nav-button-primary { background: #fff; color: #000; }
.site-header .nav-button-primary:hover { background: #e9e9e9; }
.site-header :is(a, button):focus-visible { outline: 2px solid #e7a267; outline-offset: 3px; }

.site-header .nav-menu-button { display: none; }

/* Below desktop the section links move into a dropdown panel under the pill. */
@media (max-width: 1100px) {
  .site-header { width: calc(100% - 28px); top: calc(env(safe-area-inset-top, 0px) + 14px); padding-inline: 12px; }
  .site-header .nav-actions { margin-left: auto; }
  .site-header .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-radius: 24px;
    /* Opaque: a backdrop blur nested inside the blurred pill renders nothing. */
    background: #0b0b0b;
    border: 1px solid #ffffff12;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:opacity .45s var(--nav-ease) var(--ease), transform .45s var(--nav-ease) var(--ease), visibility 0s .35s;
  }
  .site-header.is-menu-open .nav-links { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .site-header .nav-links > a { padding: 14px 16px; border-radius: 16px; font-size:1.05rem; }
  .site-header .nav-menu-button {
    appearance: none;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: #ffffff1a;
    color: #fff;
    cursor: pointer;
  }
  .site-header .nav-menu-icon { position: relative; display: block; width: 16px; height: 12px; }
  .site-header .nav-menu-icon i { position: absolute; left: 0; display: block; width: 16px; height: 1.5px; background: currentColor; transition:transform .45s var(--nav-quint) var(--ease); }
  .site-header .nav-menu-icon i:nth-child(1) { top: 0; }
  .site-header .nav-menu-icon i:nth-child(2) { top: 5.25px; transition:opacity .3s var(--nav-quint) .4s var(--ease); }
  .site-header .nav-menu-icon i:nth-child(3) { top: 10.5px; }
  .site-header .nav-menu-button[aria-expanded="true"] .nav-menu-icon i:nth-child(1) { transform: translateY(5.25px) rotate(-45deg); }
  .site-header .nav-menu-button[aria-expanded="true"] .nav-menu-icon i:nth-child(2) { opacity: 0; transition-delay: 0s; }
  .site-header .nav-menu-button[aria-expanded="true"] .nav-menu-icon i:nth-child(3) { transform: translateY(-5.25px) rotate(45deg); }
}

/* Phones: logo, Contact and the menu button in the pill; the section links live in the menu. */
@media (max-width: 600px) {
  .site-header { gap: 8px; padding-inline: 10px; }
  .site-header .brand img { height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header *, .site-header *::before, .site-header *::after { transition:none !important; }
}

/* quality-type.css */
/* One deliberate, finite pass across the four phrases. Text remains one accessible heading. */
.quality-statement[data-quality-type] .reading-word {
  display: inline-block;
  max-width: 100%;
  color: #555;
  opacity: 1;
  transform: none;
  transition:none;
  background: linear-gradient(100deg, #f1eee8 0%, #f1eee8 44%, #555 53%, #555 100%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.quality-statement[data-quality-type] .reading-word:first-child {
  color: #f1eee8;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.quality-statement[data-quality-type="playing"] {
  animation: quality-heading-arrive .7s cubic-bezier(.22, 1, .36, 1) both;
}
.quality-statement[data-quality-type="playing"] .reading-word:not(:first-child) {
  animation: quality-phrase-wipe .7s cubic-bezier(.22, 1, .36, 1) var(--quality-delay, 0ms) both;
}
.quality-statement[data-quality-paused="true"],
.quality-statement[data-quality-type="playing"][data-quality-paused="true"] .reading-word:not(:first-child) {
  animation-play-state: paused;
}
.quality-statement[data-quality-type="done"] .reading-word {
  color: #f1eee8;
  background: none;
  -webkit-text-fill-color: currentColor;
}
@keyframes quality-heading-arrive {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}
@keyframes quality-phrase-wipe {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .quality-statement[data-quality-type] .reading-word {
    color: #f1eee8;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quality-statement[data-quality-type],
  .quality-statement[data-quality-type] .reading-word { animation: none !important; transform: none; }
  .quality-statement[data-quality-type] .reading-word {
    color: #f1eee8;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* motion.css */
/* Scroll-linked scenes (motion.js). Every effect rests fully visible without JavaScript or with reduced motion. */

/* Reading headings: unread words wait dimmed, then light up in order. */
html:not(.motion-off) .reading .rw { opacity: .16; transition:opacity .45s cubic-bezier(.22,1,.36,1); }
html:not(.motion-off) .reading .rw.on { opacity: 1; }

/* Network: the map zooms and settles behind the fixed, feathered frame (network.js). Moving the preview keeps
   its own dark backing, so the map's screen blend is unchanged. */
html:not(.motion-off) .network-section .production-map-preview {
  transform-origin: var(--map-ox, 50%) var(--map-oy, 50%);
  transform: translate3d(var(--map-x, 0px), var(--map-y, 0px), 0) scale(var(--map-scale, 1));
  opacity: var(--map-in, 1);
  will-change: transform, opacity;
}

/* Pipeline frame: rounded like the LUCI detail panels. Its arrival is lab.js. */
.pipeline-visual { border-radius: 18px; }

/* Diversity: LUCI's scroll glow builds under the title as the section passes. */
/* Feathered on all sides so the glow never meets the next section as an edge. */
.motion-glow {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 58%, transparent 92%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 58%, transparent 92%);
}
.motion-glow > div {
  position: absolute; left: 50%; bottom: -12%; width: 170%; height: 70%;
  transform: translate(-50%, calc((1 - var(--g, 0)) * 22%)) scale(calc(.9 + var(--g, 0) * .2));
  transform-origin: 50% 100%;
  background: radial-gradient(111.72% 151.21% at 50.07% 50%, #dcc9a0 1.82%, #ffad56 15.87%, #c7470c 24.74%, #6f2e0a 30%, #12090500 34.3%);
  filter: blur(70px);
  opacity: calc(.04 + var(--g, 0) * .3);
}

/* Contact: a sunrise rises from the bottom edge; its brightest point follows the pointer. */
.mu-contact { --hx: 24%; }
.motion-horizon { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: clamp(260px, 46vh, 520px); overflow: hidden; pointer-events: none; }
.motion-horizon > div {
  position: absolute; left: var(--hx, 24%); top: 100%;
  width: min(1600px, 160vw); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, calc(var(--rise, .5) * -50%));
  background: radial-gradient(circle, #dcc9a0 0%, #ffad56 15%, #ee5a1a 26%, #c7470c 34%, #6f2e0a 44%, #120905 57%, #0000 68%);
  filter: blur(37px);
  opacity: .78;
  will-change: transform;
}
.motion-horizon::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, #ffdb8800 calc(var(--hx, 24%) - 15%), #ffdb88f2 var(--hx, 24%), #ad5a22 calc(var(--hx, 24%) + 20%), #6f2e0a calc(var(--hx, 24%) + 40%), #120905 calc(var(--hx, 24%) + 60%), #12090500 calc(var(--hx, 24%) + 75%));
}
/* The horizon line now separates contact from the footer. */
.site-footer { border-top-color: transparent; }

html.motion-off .motion-horizon > div { transform: translate(-50%, -30%); }
html.motion-off .motion-glow > div { opacity: .2; transform: translate(-50%, 10%); }

/* pin-reveal.css */
/* LUCI Pin reveal, after memories.ai/memories-upload. The stage pins over the hero's last moment,
   the Pin rises as the memories upload away, then LUCI's sunrise glow climbs through the
   statement: the colour-dodge copy lights where the glow passes and a solid copy settles in.
   Resting values are one still frame, used without JS or with reduced motion. */
.pin-reveal { position: relative; background: #050505; overflow: clip; }
/* Nothing in the stage is interactive, so its transparent approach never blocks the hero beneath. */
.pin-reveal.is-scrolly { z-index: 3; background: transparent; pointer-events: none; }
.pin-reveal__runway { position: relative; }
.pin-reveal.is-scrolly .pin-reveal__runway { height: 290vh; }
.pin-reveal__stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100vh; height: 100svh; min-height: 620px;
  isolation: isolate; overflow: hidden;
}
.pin-reveal.is-scrolly .pin-reveal__stage { position: sticky; top: 0; min-height: 0; }
/* Layers sit at z-index 0 in source order, so the copy's colour-dodge blends with the glow beneath. */
.pin-reveal__bg { position: absolute; inset: 0; z-index: 0; background: #050505; opacity: var(--pr-bg, 1); }


.pin-reveal__glow {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  transform: translate3d(0, var(--pr-glow, 0%), 0);
  will-change: transform; pointer-events: none;
}
.pin-reveal__glow-shape {
  flex: none; width: 160vw; height: 80vh; min-height: 80vh;
  background: radial-gradient(111.72% 151.21% at 50.07% 50%, #dcc9a0 1.82%, #ffad56 15.87%, #c7470c 24.74%, #6f2e0a 30%, #12090500 34.3%);
  filter: blur(100px);
}
/* Tablets and phones use the pre-blurred render instead of a live 100px blur, as the live site does. */
.pin-reveal__glow-img { display: none; flex: none; width: 160vw; max-width: none; height: 80vh; min-height: 80vh; object-fit: scale-down; }

/* Column: Pin, then statement. No stacking context here, so the copy can blend with the glow. */
.pin-reveal__layout {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: clamp(24px, 4.2vh, 44px); width: 100%; padding: 0 20px; text-align: center;
}
/* The Pin rises from below into the space the uploaded frames left, and at the end travels to the
   centre and shrinks into a point of light. */
.pin-reveal__rise {
  position: relative; z-index: 1; opacity: var(--pr-pin, 1);
  transform: translate3d(var(--pr-dx, 0px), var(--pr-dy, 0px), 0) scale(var(--pr-shrink, 1));
}
/* That point: styled like a city on the network map, so the map can take it over seamlessly. */
.pin-reveal__dot { position: absolute; z-index: 2; left: 50%; top: 50%; width: 0; height: 0; opacity: var(--pr-dot, 0); pointer-events: none; }
.pin-reveal__dot i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ff9a3c; box-shadow: 0 0 12px 3px #ff8a28b3; }
.pin-reveal__pin {
  position: relative; display: block; width: 14rem; height: auto; aspect-ratio: 660 / 540;
  transform: translate3d(0, var(--pr-rise, 0px), 0) scale(var(--pr-scale, 1)); will-change: transform;
}
.pin-reveal__halo {
  position: absolute; left: 50%; top: 50%; width: 30rem; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, calc(-50% + var(--pr-rise, 0px))) scale(calc(.6 + var(--pr-halo, .5) * .5));
  background: radial-gradient(circle, #ffc58a59 0%, #ff9a3c26 32%, #c7470c0d 55%, transparent 70%);
  filter: blur(18px); opacity: var(--pr-halo, .5); pointer-events: none;
}

.pin-reveal__copy { display: grid; width: min(46.875rem, 100%); }
.pin-reveal__text {
  grid-area: 1 / 1; margin: 0;
  color: #424242; font-size: 3.25rem; font-weight: 500; line-height: 1.03; letter-spacing: -.0975rem;
  text-wrap: balance;
}
.pin-reveal__text.is-dodge { mix-blend-mode: color-dodge; opacity: var(--pr-copy, 1); }
.pin-reveal__text.is-solid { opacity: calc(var(--pr-solid, 0) * var(--pr-copy, 1)); }

  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .375rem .375rem 1rem; border: 1px solid #ffffff4d; border-radius: 56px;
  background: #ffffff66; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; font-size:1.05rem; line-height: 1.37; letter-spacing: -.03rem; white-space: nowrap;
  transition:background-color .45s var(--ease);
}

@media (max-width: 991px) {
  .pin-reveal__text { font-size: 2.75rem; }
  .pin-reveal__glow-shape { display: none; }
  .pin-reveal__glow-img { display: block; }
}
@media (max-width: 760px) {
  .pin-reveal__text { font-size: clamp(28px, 7.4vw, 40px); letter-spacing: -.06rem; }
  .pin-reveal__pin { width: clamp(150px, 40vw, 14rem); }
  .pin-reveal__halo { width: 20rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pin-reveal__glow, .pin-reveal__pin { transform: none; will-change: auto; }
}

/* intro.css */
/* Hero intro (intro.js). The runway holds the hero stage in place while scroll plays the sequence.
   Copy moves with `translate` and `filter`, so the load-in animations on `transform` and `opacity`
   still play. Without JS or with reduced motion, the hero is the original static first screen. */
.hero-runway { position: relative; }
.hero-runway.is-scrolly { height: calc(100svh + 230svh); }
.hero-runway.is-scrolly > .hero { position: sticky; top: 0; height: 100svh; min-height: 0; max-height: none; }

/* The intro owns the hero copy's scroll motion (app.js's simple fade is set aside). */
.hero-runway.is-scrolly .hero-content { transform: none; opacity: 1; }
.hero-runway.is-scrolly :is(.upload-logo, .hero h1 .line, .hero-content > p, .hero-actions) {
  translate: 0 var(--ir-y, 0px);
  filter: blur(var(--ir-blur, 0px)) opacity(var(--ir-o, 1));
  will-change: translate, filter;
}
.hero-runway.is-scrolly .hero h1 .line { overflow: visible; }

/* The ribbon rises toward the centre and grows, like a camera moving in on the frames. */
.hero-runway.is-scrolly .hero .memory-ribbon {
  transform-origin: 50% 100%;
  transform: translateX(-50%) translateY(var(--ir-rise, 0px)) scale(var(--ir-scale, 1));
}
.hero-runway.is-scrolly .hero-visual { -webkit-mask-image: linear-gradient(#000 88%, transparent 100%); mask-image: linear-gradient(#000 88%, transparent 100%); }

/* Memories fill the frames; each frame then uploads, lifting away and shrinking. */
.memory-shot { opacity: 0; pointer-events: none; }
/* Upward motion should travel up the screen, not along each frame's tilt, so lift wraps the tilt. */
.hero-runway.is-scrolly .memory-shot {
  opacity: calc(var(--fill, 0) * .92);
  filter: saturate(.82) sepia(.12) brightness(.9);
}
.hero-runway.is-scrolly .frame-lift {
  transform-box: fill-box; transform-origin: center;
  transform: translate(0, var(--lift-y, 0px)) scale(var(--lift-s, 1));
  opacity: var(--lift-o, 1);
}
/* Filled frames read brighter than the empty outlines they started as. */
.hero-runway.is-scrolly .memory-frame { opacity: calc(var(--frame-motion-opacity, var(--frame-opacity)) + var(--fill, 0) * (1 - var(--frame-motion-opacity, var(--frame-opacity)))); }

/* The warm light swells as the frames fill, then falls away into the night of the map. */
.hero-runway.is-scrolly .hero-light { opacity: var(--ir-light, 1); }
.hero-runway.is-scrolly .hero::before {
  content: ''; position: absolute; z-index: 0; left: 50%; top: 58%; width: 120vw; height: 70vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #ffad5638, #c7470c1f 45%, transparent 75%);
  filter: blur(40px); opacity: var(--ir-glow, 0); pointer-events: none;
}


@media (max-width: 760px) {
  .hero-runway.is-scrolly { height: calc(100svh + 180svh); }
}

/* network.css */
/* Network scene (network.js). The stage pins over a runway; resting values are the original static
   section, used without JS or with reduced motion. */
.network-stage { position: relative; height: 100%; }
.network-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.network-ui a, .network-ui button { pointer-events: auto; }

.network-section.is-scrolly { height: calc(var(--net-h) + 380svh); min-height: 0; max-height: none; overflow: clip; }
.network-section.is-scrolly .network-stage { position: sticky; top: 0; height: var(--net-h); overflow: hidden; isolation: isolate; }

/* The copy lifts away together, the headline faster than the stats, blurring as it goes. */
.network-section.is-scrolly .network-ui {
  translate: 0 var(--away-y, 0px);
  filter: blur(var(--away-blur, 0px)) opacity(var(--away-o, 1));
}
.network-section.is-scrolly :is(.network-copy, .network-stats) { translate: 0 var(--away-lead, 0px); }


/* Scan: a warm band sweeps west to east across the map. */
.uplm-scan { display: none; }
.network-section.is-scrolly .uplm-scan {
  display: block; position: absolute; top: -10%; bottom: -10%; left: var(--sweep, -10%); width: 16%;
  transform: translateX(-50%); opacity: var(--scan, 0); pointer-events: none;
  background: linear-gradient(90deg, #ff9a3c00, #ff9a3c14 30%, #ffdb8866 50%, #ff9a3c14 70%, #ff9a3c00);
}

/* Cities ignite as the scan passes: the point grows in and a ring flashes outward once. */
.network-section.is-scrolly .uplm-h { opacity: var(--on, 1); }
.network-section.is-scrolly .uplm-h i { transform: scale(calc(.3 + var(--on, 1) * .7)); }
.network-section.is-scrolly .uplm-h::after {
  content: ''; position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%;
  border: 1.5px solid #ffc58a;
  transform: scale(calc(.15 + var(--flash, 1) * 1.6));
  opacity: calc((1 - var(--flash, 1)) * var(--on, 1));
}


@media (max-width: 760px) {
  .network-section.is-scrolly { height: calc(var(--net-h) + 200svh); }
}

/* The map breathes in place: a gentle sink as the cities leave it. */
.network-section.is-scrolly .map-field { transform: scale(var(--fold-s, 1)); will-change: transform; }

/* Handoffs (network.js). The map appears in place over the Pin's point of light, which it pins over
   for the Pin's last 3% of scroll; Diversity appears in place over the long-tail columns. */
.pin-reveal.is-scrolly + .network-section.is-scrolly {
  z-index: 4; background: transparent;
  margin-top: calc(-240vh + .97 * (240vh - 100svh));
}
.network-section.is-scrolly .network-stage { opacity: var(--net-in, 1); }
/* Diversity is solid: once it is in, nothing of the map shows behind it. */
.network-section.is-scrolly + .diversity-section { z-index: 5; background: #050505; opacity: var(--div-in, 1); }

/* The long tail (network.js): the cities as points of light, gliding down to the chart's baseline and
   rising to where its columns will top out, before Diversity's tiles populate under them. */
.network-tail { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--tail-o, 1); }
.network-tail__viz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: none; }
.network-tail__points circle { fill: #ff9a3c; opacity: var(--dots, 0); filter: drop-shadow(0 0 6px #ff8a28cc); }

/* lab.css */
/* The pipeline as a light "lab" for the labs (lab.js). Clean warm paper, no pattern. Without JS or with reduced motion the section
   simply sits on light; with motion, daylight floods out of the chart's top frame instead. */
.quality-section {
  --lab-bg: #ebebeb; --lab-ink: #171513; --lab-muted: #57524b; --lab-faint: #8a847a; --lab-accent: #cf651b;
  --lab-paper: #ebebeb;
  background: var(--lab-paper);
  color: var(--lab-ink);
}
.quality-section::before { display: none; }
/* Stack, back to front: hero, Pin (3), Network (4), Diversity (5), daylight and frame (6), pipeline (7),
   Hardware (8), so the daylight passes over Diversity and the next dark chapter covers it. */
html.lab-on .quality-section { position: relative; z-index: 7; background: transparent; }
/* The next dark chapter covers the fixed daylight as it arrives. */
html.lab-on .mu-hardware { z-index: 8; }

/* Daylight: a fixed sheet revealed through a soft circle that grows from the travelling frame. */
.lab-flood {
  position: fixed; inset: clamp(12px, 1.6vw, 26px);
  z-index: 6; visibility: hidden; pointer-events: none;
  background: #ebebeb;
  border-radius: clamp(18px, 2vw, 32px);
  opacity: var(--fo, 0);
}
/* The travelling frame: a warm glow while it lifts out of the dark, a soft lab shadow as it lands.
   It shares the daylight's layer (painted after it), so the pipeline heading stays on top of it. */
.lab-morph {
  position: fixed; left: 0; top: 0; z-index: 6; visibility: hidden; pointer-events: none;
  overflow: hidden; background: #1a1714;
  border-radius: calc(2px + var(--fly, 0) * 16px);
  /* No glow around the frame as it grows; only the soft shadow it lands on. */
  box-shadow: 0 calc(var(--fly, 0) * 40px) calc(var(--fly, 0) * 80px) calc(var(--fly, 0) * -30px) #3a26143d;
  will-change: transform, width, height;
}
.lab-morph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 58%; filter: saturate(calc(.7 + var(--fly, 0) * .2)) brightness(calc(.8 + var(--fly, 0) * .16)); }
.quality-section.is-landing .pipeline-visual { visibility: hidden; }
/* The heading arrives as the frame lands (filter, so its own entrance animations still run). */
html.lab-on main #quality :is(.quality-statement, .pipeline-controls) {
  filter: opacity(var(--lab-head, 1)); translate: 0 calc((1 - var(--lab-head, 1)) * 18px);
}

/* Diversity holds in place while the lab arrives (sizes from lab.js); clip, not hidden, so it can stick. */
html.lab-on #diversity { overflow: clip; }
html.lab-on .diversity-stage { position: sticky; }
/* The chart recedes as its frame lifts away. */
#diversity .skill-tail__chart { opacity: calc(1 - var(--lab-out, 0) * .75); filter: blur(calc(var(--lab-out, 0) * 3px)); }
#diversity .skill-tail__head { translate: 0 calc(var(--lab-out, 0) * -30px); opacity: calc(1 - var(--lab-out, 0) * .6); }

/* Type on light. */
.quality-section .quality-statement .reading-word,
.quality-section .quality-statement[data-quality-type] .reading-word {
  color: #c9c2b7;
  background: linear-gradient(100deg, var(--lab-ink) 0%, var(--lab-ink) 44%, #c9c2b7 53%, #c9c2b7 100%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.quality-section .quality-statement .reading-word:first-child,
.quality-section .quality-statement[data-quality-type] .reading-word:first-child,
.quality-section .quality-statement[data-quality-type="done"] .reading-word {
  color: var(--lab-ink); background: none; -webkit-text-fill-color: currentColor;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .quality-section .quality-statement[data-quality-type] .reading-word { color: var(--lab-ink); background: none; -webkit-text-fill-color: currentColor; }
}
.quality-section .pipeline-tabs > button,
.quality-section .pipeline-tabs > button > span { color: var(--lab-faint); }
.quality-section .pipeline-tabs > button[aria-selected="true"] { color: var(--lab-ink); }
.quality-section .pipeline-tabs > button[aria-selected="true"] > span { color: var(--lab-accent); }
.quality-section .pipeline-tabs > button > span::before { background: var(--lab-accent); }
.quality-section .pipeline-tabs > button:hover { color: var(--lab-ink); }
.quality-section #pipeline-detail { color: #4f4a43; }
.quality-section.is-scrubbed .pipeline-tabs > button::before { background: #17151324; }
.quality-section.is-scrubbed .pipeline-tabs > button::after { background: var(--lab-accent); }

/* The capture frame on paper: a crisp edge, a soft lab shadow, footage at its true brightness. */
.quality-section .pipeline-visual {
  background: #e9e4dc; border-color: #17151314;
  box-shadow: 0 40px 80px -34px #3a261445, 0 2px 8px #3a261412;
}
.quality-section .pipeline-visual > img { filter: saturate(.92) brightness(.96); }
.quality-section .pipeline-visual[data-stage="1"] > img { filter: saturate(.78) brightness(.86); }
.quality-section .pipeline-visual[data-stage="2"] > img { filter: saturate(.84) brightness(.9); }
.quality-section .pipeline-visual::after {
  content: ''; position: absolute; inset: 0 0 auto; z-index: 1; height: 28%; pointer-events: none;
  background: linear-gradient(#0000004d, transparent);
}

/* Stage effects, driven by each stage's own scroll progress (app.js). */
.quality-section .pipeline-visual[data-stage="0"] .media-top i { animation: lab-rec 1.4s ease-in-out infinite; }
@keyframes lab-rec { 50% { opacity: .25; } }
/* Capture: a slow push-in as the stage plays. */
.quality-section.is-scrubbed .pipeline-visual[data-stage="0"] > img { transform: scale(calc(1.07 - var(--s0, 1) * .06)); }
/* Enrich: a scan line sweeps the frame top to bottom. */
.quality-section.is-scrubbed .pipeline-visual .scanline {
  display: block; animation: none; height: 2px; top: calc(var(--s1, 0) * 100%);
  background: linear-gradient(90deg, #ffd9b000, #ffd9b0 20%, #fff 50%, #ffd9b0 80%, #ffd9b000);
  box-shadow: 0 0 28px 8px #ff9a3c59; opacity: 0; transition:opacity .3s var(--ease);
}
.quality-section.is-scrubbed .pipeline-visual[data-stage="1"] .scanline { opacity: .9; }
/* Annotate: boxes draw in from their top-left corner, labels first. */
.quality-section.is-scrubbed .pipeline-visual[data-stage="2"] .annotation-box {
  clip-path: inset(-28px calc((1 - var(--draw, 1)) * 100%) calc((1 - var(--draw, 1)) * 100%) -2px);
}

@media (prefers-reduced-motion: reduce) {
  .quality-section .pipeline-visual[data-stage="0"] .media-top i { animation: none; }
  .quality-section .quality-statement[data-quality-type] .reading-word { color: var(--lab-ink); background: none; -webkit-text-fill-color: currentColor; }
}

/* pipeline-lab.css */
/* Pipeline console and stage overlays (pipeline-lab.js, app.js). Desktop pins one console: title and
   stages on the left, footage on the right, so the title stays readable through every stage. */
@media (min-width: 1024px) {
  .pipeline-scene {
    display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.5fr); grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(36px, 4.5vw, 80px); align-items: start;
  }
  .pipeline-scene > .quality-statement { grid-column: 1; grid-row: 1; margin-top: 0; font-size: clamp(30px, 2.5vw, 42px); line-height: 1.1; }
  .pipeline-scene .pipeline-workspace { display: contents; }
  .pipeline-scene .pipeline-visual { grid-column: 2; grid-row: 1 / 3; height: min(66svh, 620px); max-height: none; }
  .pipeline-scene .pipeline-controls { grid-column: 1; grid-row: 2; align-self: end; margin-top: 28px; }
  .pipeline-scene .pipeline-tabs { grid-template-columns: 1fr; gap: 0; }
  .pipeline-scene .pipeline-tabs > button { min-height: 0; flex-direction: row; align-items: baseline; gap: 14px; padding: 14px 0 12px; }
  .pipeline-scene .pipeline-tabs > button strong { font-size: clamp(20px, 1.7vw, 26px); }
  .pipeline-scene .pipeline-footer { margin-top: 16px; }
  .pipeline-scene #pipeline-detail { min-height: 66px; max-width: 34ch; font-size:.92rem; }
  .quality-section.is-scrubbed .pipeline-scene { position: sticky; z-index: 1; }
  .quality-section.is-scrubbed .pipeline-scene .pipeline-visual { max-height: none; }
}

/* Capture, Enrich and Annotate read like the internal clip dashboard: compact frosted cards with the
   dashboard's own type and colours over the footage. Playheads follow each stage's progress (--s0…--s2). */
.dash {
  --dash-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --dash-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  position: absolute; left: 14px; bottom: 14px; z-index: 3; width: min(390px, calc(100% - 28px));
  padding: 8px 10px 9px; border: 1px solid #ffffffb3; border-radius: 8px;
  background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  color: #1f1f22; box-shadow: 0 10px 28px -14px #0009, 0 1px 3px #00000014;
  font: 400 11px/1.3 var(--dash-font); letter-spacing: 0; -webkit-font-smoothing: antialiased;
  opacity: 0; pointer-events: none;
}
.pipeline-visual[data-stage="0"] .dash-views,
.pipeline-visual[data-stage="1"] .dash-trim,
.pipeline-visual[data-stage="2"] .dash-tasks { opacity: 1; }
/* The copy riding in on the landing frame (lab.js) fades up over the last stretch of the flight. */
.lab-morph .dash-views { --s0: 0; opacity: clamp(0, (var(--fly, 0) - .7) * 3.4, 1); }
.dash-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; margin-bottom: 6px; }
.dash-head strong { font-size: 11.5px; font-weight: 600; }
.dash-mono { font-family: var(--dash-mono); font-size: 10px; }
.dash-mute { color: #71717a; }
.dash-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.dash-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px;
  border: 1px solid #e4e4e7; border-radius: 4px; background: #fff; color: #52525b; font-size: 10px; white-space: nowrap;
}
.dash-chip b { color: #2e9a4a; font-weight: 600; }
.dash-playhead { position: absolute; top: 0; bottom: 0; width: 1.5px; background: #e0393e; pointer-events: none; }

/* Capture: every view of the session on one clock. */
.dash-views__rows { position: relative; display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 3px 10px; }
.dash-views__name { display: grid; color: #3f3f46; font-size: 10.5px; font-weight: 400; line-height: 1.2; }
.dash-views__name.is-main { color: #1f1f22; font-weight: 600; }
.dash-sub { overflow: hidden; color: #2e9a4a; font-size: 9.5px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.dash-views__bar { height: 6px; border-radius: 99px; background: #d4d4d8; }
.dash-views__bar.is-main { background: #e6a56b; }
.dash-views .dash-playhead { left: calc(118px + (100% - 118px) * (.12 + var(--s0, .3) * .7)); }

/* Enrich: the idle trim, seconds by label and the checks. */
.dash-trim__bar { position: relative; display: flex; height: 15px; overflow: hidden; border-radius: 3px; background: #c8e3cf; }
.dash-trim__bar > span:first-child { flex: 0 0 97%; padding-left: 5px; color: #4b6b53; font-size: 9.5px; line-height: 15px; }
.dash-trim__bar > i { flex: 1; background: repeating-linear-gradient(135deg, #f2c14e 0 3px, #fbe7ae 3px 6px); }
.dash-trim .dash-playhead { left: calc(var(--s1, .4) * 97%); }
.dash-legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 6px; font-size: 10.5px; }
.dash-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #2e9a4a; }
.dash-legend i.is-cut { background: #e3a500; }
/* Each check ticks in as the scan line passes its height. */
.quality-section.is-scrubbed .dash-checks .dash-chip:nth-child(1) { opacity: clamp(0, (var(--s1, 1) - .5) * 9, 1); }
.quality-section.is-scrubbed .dash-checks .dash-chip:nth-child(2) { opacity: clamp(0, (var(--s1, 1) - .63) * 9, 1); }
.quality-section.is-scrubbed .dash-checks .dash-chip:nth-child(3) { opacity: clamp(0, (var(--s1, 1) - .76) * 9, 1); }
.pipeline-visual .scanline { background: #fff; box-shadow: 0 0 22px 3px #ffffff38; }

/* Annotate: tasks and scenes along the clip, the current activity outlined as the playhead crosses it.
   The card sits at the top so the hands, boxes and pose stay in view. */
.dash.dash-tasks { top: 14px; bottom: auto; width: min(430px, calc(100% - 28px)); }
.pipeline-visual .media-top { transition:opacity .3s var(--ease); }
.pipeline-visual[data-stage="2"] .media-top { opacity: 0; }
.dash-tasks__rows { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 3px 8px; }
.dash-tasks__label { color: #52525b; font-size: 10.5px; }
.dash-tasks__bar, .dash-tasks__acts > span {
  overflow: hidden; height: 17px; padding: 0 6px; border: 1px solid transparent; border-radius: 3px;
  font-size: 10.5px; line-height: 15px; white-space: nowrap; text-overflow: ellipsis;
}
.dash-tasks__bar.is-scene { background: #d6f0ec; }
.dash-tasks__bar.is-objects { border-color: #d4d4d8; background: #fff; }
.dash-tasks__bar.is-goal { border-color: #d9b3cc; background: #f3d6ea; }
.dash-tasks__acts { display: flex; gap: 2px; min-width: 0; }
.dash-tasks__acts > span {
  flex: 0 0 calc((var(--b) - var(--a)) * 100% - 2px); min-width: 0; background: #f3d6ea;
  border: 1.5px solid rgb(31 31 34 / clamp(0, min(var(--s2, 0) - var(--a), var(--b) - var(--s2, 0)) * 400, 1));
}
.dash-tasks .dash-playhead { left: calc(60px + (100% - 60px) * var(--s2, .7)); background: #1f1f22; }
.dash-tasks__caption { margin: 6px 0 0; font-size: 10.5px; }

/* Annotate: plain boxes with dashboard tags, and a 21-joint pose per hand in the Data page's colours.
   Joints the hand hides (fingertips curled under the knife handle) are drawn faded. */
.pipeline-visual .annotation-box { border: 0; border-radius: 0; box-shadow: none; }
/* Tags read from each box's bottom-right corner, clear of the fingers and the task card above. */
.pipeline-visual .annotation-box > span {
  top: auto; left: auto; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 3px; background: #fff; color: #1f1f22;
  font: 500 10px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
.lab-pose { position: absolute; z-index: 2; pointer-events: none; overflow: visible; opacity: 0; transition:opacity .45s var(--ease); }
.pipeline-visual[data-stage="2"] .lab-pose { opacity: 1; }
.lab-pose__bones path {
  fill: none; stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--s2, 1) - .22) * 2.6, 1));
  filter: drop-shadow(0 0 1.5px #00000080);
}
.lab-pose__joints circle { fill: #fff; stroke: #00000059; stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: clamp(0, (var(--s2, 1) - .32) * 4, 1); }
.lab-pose__hand.is-left .lab-pose__bones path { stroke: #8f6be8; }
.lab-pose__hand.is-left .lab-pose__joints circle { fill: #8f6be8; }
.lab-pose__bones path.is-occluded { opacity: .45; }
.lab-pose__joints circle.is-occluded { opacity: calc(clamp(0, (var(--s2, 1) - .32) * 4, 1) * .45); }

/* Deliver: the footage shrinks into the Data Lake's matched-clip slot (inline geometry from JS). */
.pipeline-visual > img.is-delivering {
  position: absolute; z-index: 4; transform: none; transition:none; object-fit: cover; object-position: 50% 60%;
  filter: saturate(.8) brightness(.92); box-shadow: 0 10px 30px #0006;
}

@media (max-width: 760px) {
  .dash, .dash.dash-tasks { left: 8px; width: calc(100% - 16px); padding: 7px 8px 8px; border-radius: 7px; font-size: 10px; }
  .dash { bottom: 8px; }
  .dash.dash-tasks { top: 8px; }
  .dash-head { gap: 1px 7px; margin-bottom: 5px; }
  .dash-head strong { font-size: 10.5px; }
  .dash-mono, .dash-chip, .dash-legend, .dash-tasks__label, .dash-tasks__caption, .dash-views__name { font-size: 9.5px; }
  .dash-sub { display: none; }
  .dash-views__rows { grid-template-columns: 70px 1fr; gap: 3px 8px; }
  .dash-views .dash-playhead { left: calc(78px + (100% - 78px) * (.12 + var(--s0, .3) * .7)); }
  .dash-tasks__rows { grid-template-columns: 46px 1fr; gap: 3px 6px; }
  .dash-tasks__bar, .dash-tasks__acts > span { height: 16px; padding: 0 5px; font-size: 9.5px; line-height: 14px; }
  .dash-tasks .dash-playhead { left: calc(52px + (100% - 52px) * var(--s2, .7)); }
  .pipeline-visual .annotation-box > span { right: 3px; bottom: 3px; padding: 0 5px; font-size:.74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-pose, .pipeline-visual .media-top { transition:none; }
}

/* Overlays inside the footage keep light type, whatever the page around them. */
.quality-section .pipeline-visual { color: #f3efe8; }


/* The clip package: what every delivery contains, beside a sample of the structured output. */
.lab-package {
  display: grid; gap: 40px; align-items: center;
  margin-top: clamp(72px, 9vw, 140px); padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid #1715131a;
}
.lab-package__copy h3 { margin: 0; color: var(--lab-ink); font-size: clamp(30px, 2.8vw, 44px); font-weight: 400; line-height: 1.08; letter-spacing: -.045em; }
.lab-package__copy > p { margin: 16px 0 0; color: #4f4a43; font-size:1rem; }
.lab-package__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.lab-package__list li { display: grid; gap: 3px; padding: 14px 0; border-top: 1px solid #1715131a; }
.lab-package__list strong { color: var(--lab-ink); font-size:1rem; font-weight: 500; }
.lab-package__list span { color: #6c675f; font-size:.92rem; line-height: 1.45; }
.lab-package__sample {
  margin: 0; overflow: hidden; border-radius: 14px; background: #141311; color: #e6e1d9;
  box-shadow: 0 40px 80px -34px #3a261452, 0 2px 8px #3a261414;
}
.lab-package__sample figcaption {
  display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid #ffffff14; color: #b9b2a8; font-size:.86rem;
}
.lab-package__sample figcaption span:last-child { color: #8a847a; }
.lab-package__sample pre {
  margin: 0; padding: 18px 20px 22px; overflow-x: auto;
  font: 12.5px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word;
}
.lab-package__sample .k { color: #ffb779; }
.lab-package__sample .s { color: #ece6dc; }
.lab-package__sample .n { color: #ffd2a6; }
.lab-package__sample .c { color: #8a847a; }

@media (min-width: 1024px) {
  .lab-package { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 88px); }
}
@media (max-width: 760px) {
  .lab-package__list { grid-template-columns: 1fr; }
  .lab-package__sample pre { font-size:.84rem; padding: 14px 14px 18px; }
}

/* contact-light.css */
/* Contact closes the page on light: the full screen, the lab's warm paper, dark type, and a soft
   sunrise wash. The footer continues on the same paper. Loaded last, so it settles older contact rules. */
html .mu-contact {
  --ct-ink: #171513; --ct-muted: #4f4a43; --ct-faint: #8a847a; --ct-line: #1715131f; --ct-accent: #cf651b;
  display: flex; align-items: center;
  min-height: 100svh; padding-block: clamp(96px, 12vh, 140px) clamp(72px, 10vh, 120px);
  background: #ebebeb;
  color: var(--ct-ink);
}
html .mu-contact__inner { width: calc(100% - var(--page, 48px) * 2); padding-top: 0; border-top: 0; }
html .mu-contact h2 { color: var(--ct-ink); font-size: clamp(42px, 5.2vw, 80px); max-width: 11ch; }
html .mu-contact__intro { color: var(--ct-muted); }
html .mu-contact__prompt { color: var(--ct-faint); }

/* By id too, to settle an older #contact-form rule in styles.css. */
html .mu-contact label, html #contact-form label { color: #171513; }
html .mu-contact label > span, html #contact-form label span { color: #6c675f; }
html .mu-contact input,
html .mu-contact select,
html .mu-contact textarea {
  border-color: #17151338; background: #fff; color: var(--ct-ink); color-scheme: light;
}
html .mu-contact input::placeholder,
html .mu-contact textarea::placeholder { color: #6f6a63; }
html .mu-contact input:hover,
html .mu-contact select:hover,
html .mu-contact textarea:hover { border-color: #17151366; }
html .mu-contact input:focus,
html .mu-contact select:focus,
html .mu-contact textarea:focus { border-color: var(--ct-accent); background: #fff; outline: 1px solid var(--ct-accent); outline-offset: 2px; }
html .mu-contact select:invalid { color: #6f6a63; }
html .mu-contact select option { background: #fff; color: var(--ct-ink); }
html .mu-contact__select > svg { stroke: var(--ct-faint); }

html .mu-contact__send { border-color: var(--ct-ink); background: var(--ct-ink); color: #f6f5f2; }
html .mu-contact__send:hover { border-color: #000; background: #000; }
html .mu-contact__send:focus-visible,
html .mu-contact__reset:focus-visible { outline-color: var(--ct-accent); }
html .mu-contact__note { color: var(--ct-faint); }

html .mu-contact__success { border-color: var(--ct-line); background: #fffdf9; box-shadow: 0 40px 80px -40px #3a261433; }
html .mu-contact__success-mark { border-color: #cf651b66; color: var(--ct-accent); }
html .mu-contact__success h3 { margin-bottom: 26px; color: var(--ct-ink); }
html .mu-contact__reset { border-color: #17151333; background: transparent; color: var(--ct-ink); }
html .mu-contact__reset:hover { border-color: #17151366; background: #1715130a; }

/* The sunrise at the foot of the page, as a warm wash on paper. */
html .mu-contact .motion-horizon > div {
  background: radial-gradient(circle, #ffe2bd 0%, #ffcf96 18%, #ffb36a 30%, #ffb36a00 60%);
  filter: blur(40px); opacity: .55;
}
html .mu-contact .motion-horizon::after { opacity: .5; }

/* Footer on the same paper. */
html .site-footer { max-width: none; width: 100%; margin: 0; padding-inline: var(--page, 48px); background: #ebebeb; color: #6c675f; border-top: 1px solid #1715131a; }
html .site-footer img { filter: none; }
html .site-footer a { color: #4f4a43; }
html .site-footer a:hover { color: #171513; }

@media (max-width: 800px) {
  html .mu-contact { padding-block: 88px 64px; }
  html .mu-contact h2 { font-size: clamp(40px, 10vw, 56px); }
}

/* opening.css */
/* Opening: about 1.3s, light and staggered. The warm light blooms, the nav settles in, the Upload mark
   rises, "Train your robots." arrives word by word out of a soft blur, then the line, the buttons and
   the ribbon of frames. Every animation fills backwards only, so once it ends it lets go, and the
   scroll-told intro (intro.js) owns these elements from then on. */
.hero .hero-light { animation: opening-bloom 1.6s cubic-bezier(.22,1,.36,1) backwards; }
.site-header { animation: opening-drop .9s cubic-bezier(.22,1,.36,1) .3s backwards; }
.hero .upload-logo { animation: opening-rise .9s cubic-bezier(.22,1,.36,1) .12s backwards; }

/* The headline: words, not lines, each rising out of a light blur. */
.hero h1 .line > span { animation: none; }
.hero h1 .w { display: inline-block; animation: opening-word .95s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(.26s + var(--i, 0) * .08s); }
.hero .hero-content > p { animation: opening-rise .85s cubic-bezier(.22,1,.36,1) .58s backwards; }
.hero .hero-actions { animation: opening-rise .85s cubic-bezier(.22,1,.36,1) .7s backwards; }
.hero .memory-sheet { animation-delay: calc(.5s + min(var(--delay, 0ms), 180ms)); }

@keyframes opening-bloom { from { opacity: 0; scale: 1.08; } }
@keyframes opening-drop { from { opacity: 0; translate: 0 -14px; } }
@keyframes opening-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes opening-word { from { opacity: 0; transform: translateY(.42em); filter: blur(10px); } }

@media (prefers-reduced-motion: reduce) {
  .hero .hero-light, .site-header, .hero .upload-logo, .hero h1 .w, .hero .hero-content > p, .hero .hero-actions { animation: none; }
}

/* hw-app.css */
/* Hardware + app: the close of the Hardware chapter. The app stays brief; it has its own
   page. Copy on the left, the Tasks phone on the right. */
.mu-hardware .hw-app { position: relative; padding: clamp(56px, 6vw, 96px) 0 clamp(36px, 4vw, 64px); background: transparent; }
.mu-hardware .hw-app::before {
  content: ''; position: absolute; top: 0; left: var(--page); right: var(--page); height: 1px;
  background: #ffffff14;
}
.hw-app__grid { display: grid; gap: 48px; }
.hw-app__copy h2 { margin-top: 0; font-size: clamp(38px, 3.5vw, 56px); }
.hw-app__copy .cta-pair { margin-top: 34px; }

.hw-app__visual { position: relative; }
.hw-app__visual::before {
  content: ''; position: absolute; left: 50%; top: 52%; width: 120%; height: 90%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, #c7470c24, #6f2e0a14 40%, transparent 70%); filter: blur(30px); pointer-events: none;
}
.hw-app .app-previews { position: relative; z-index: 1; margin: 0; padding: 0; overflow: visible; background: none; }
.hw-app .app-previews .ux3 {
  display: grid !important; grid-template-columns: minmax(0, 250px) !important; gap: 0 !important;
  justify-content: center; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible;
}
.hw-app > .source-note { margin: 24px var(--page) 0; text-align: center; }

@media (min-width: 1024px) {
  .hw-app__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(40px, 5vw, 96px); }
}
@media (max-width: 1023px) {
  .hw-app .app-previews .ux3 { justify-content: center; }
}
@media (max-width: 760px) {
  .mu-hardware .hw-app { padding-top: 48px; }
  .hw-app__copy h2 { font-size: clamp(28px, 8.2vw, 44px); }
  .hw-app .app-previews .ux3 { grid-template-columns: minmax(0, 210px) !important; }
}

/* The site's native section_contact (Webflow form), placed under this page's Code Embed.
   The head code drops the site-wide stylesheet, so this carries the rules the section needs:
   from the published webflow.shared CSS (classes in the section, plus element defaults scoped
   with :where(.section_contact)), then what the site hasn't published yet and this page's overrides. */
:where(.section_contact){-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:sans-serif}
:where(.section_contact){margin:0}
:where(.section_contact) a{background-color:#0000}
:where(.section_contact) a:active,:where(.section_contact) a:hover{outline:0}
:where(.section_contact) b,:where(.section_contact) strong{font-weight:700}
:where(.section_contact) h1{margin:.67em 0;font-size:2em}
:where(.section_contact) img{border:0}
:where(.section_contact) svg:not(:root){overflow:hidden}
:where(.section_contact) button,:where(.section_contact) input,:where(.section_contact) select,:where(.section_contact) textarea{color:inherit;font:inherit;margin:0}
:where(.section_contact) button{overflow:visible}
:where(.section_contact) button,:where(.section_contact) select{text-transform:none}
:where(.section_contact) button,:where(.section_contact) input[type=button],:where(.section_contact) input[type=reset]{-webkit-appearance:button;cursor:pointer}
:where(.section_contact) button[disabled],:where(.section_contact) input[disabled]{cursor:default}
:where(.section_contact) button::-moz-focus-inner,:where(.section_contact) input::-moz-focus-inner{border:0;padding:0}
:where(.section_contact) input{line-height:normal}
:where(.section_contact) input[type=checkbox],:where(.section_contact) input[type=radio]{box-sizing:border-box;padding:0}
:where(.section_contact) input[type=number]::-webkit-inner-spin-button,:where(.section_contact) input[type=number]::-webkit-outer-spin-button{height:auto}
:where(.section_contact) input[type=search]{-webkit-appearance:none}
:where(.section_contact) input[type=search]::-webkit-search-cancel-button,:where(.section_contact) input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
:where(.section_contact) textarea{overflow:auto}
@font-face{font-family:webflow-icons;src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==)format("truetype");font-weight:400;font-style:normal}
:where(.section_contact) *{box-sizing:border-box}

:where(.section_contact){color:#333;background-color:#fff;margin:0;font-family:Arial,sans-serif;font-size:14px;line-height:20px}
:where(.section_contact) img{vertical-align:middle;max-width:100%;display:inline-block}
:where(.section_contact) [data-w-dynpage] [data-w-cloak]{color:#0000!important}
:where(.section_contact) h1,:where(.section_contact) h2,:where(.section_contact) h3,:where(.section_contact) h4,:where(.section_contact) h5,:where(.section_contact) h6{margin-bottom:10px;font-weight:700}
:where(.section_contact) h1{margin-top:20px;font-size:38px;line-height:44px}
:where(.section_contact) h2{margin-top:20px;font-size:32px;line-height:36px}
:where(.section_contact) h3{margin-top:20px;font-size:24px;line-height:30px}
:where(.section_contact) h4{margin-top:10px;font-size:18px;line-height:24px}
:where(.section_contact) h5{margin-top:10px;font-size:14px;line-height:20px}
:where(.section_contact) h6{margin-top:10px;font-size:12px;line-height:18px}
:where(.section_contact) p{margin-top:0;margin-bottom:10px}
:where(.section_contact) ul,:where(.section_contact) ol{margin-top:0;margin-bottom:10px;padding-left:40px}
.w-embed:before,.w-embed:after{content:" ";grid-area:1/1/2/2;display:table}
.w-embed:after{clear:both}
:where(.section_contact) button{cursor:pointer;-webkit-appearance:button;border:0}
.w-form{margin:0 0 15px}
.w-form-done{text-align:center;background-color:#ddd;padding:20px;display:none}
.w-form-fail{background-color:#ffdede;margin-top:10px;padding:10px;display:none}
:where(.section_contact) label{margin-bottom:5px;font-weight:700;display:block}
.w-input,.w-select{color:#333;vertical-align:middle;background-color:#fff;border:1px solid #ccc;width:100%;height:38px;margin-bottom:10px;padding:8px 12px;font-size:.97rem;line-height:1.42857;display:block}
.w-input::placeholder,.w-select::placeholder{color:#999}
.w-input:focus,.w-select:focus{border-color:#3898ec;outline:0}
.w-input[disabled],.w-select[disabled],.w-input[readonly],.w-select[readonly],fieldset[disabled] .w-input,fieldset[disabled] .w-select{cursor:not-allowed}
.w-input[disabled]:not(.w-input-disabled),.w-select[disabled]:not(.w-input-disabled),.w-input[readonly],.w-select[readonly],fieldset[disabled]:not(.w-input-disabled) .w-input,fieldset[disabled]:not(.w-input-disabled) .w-select{background-color:#eee}
textarea.w-input,textarea.w-select{height:auto}
.w-select{background-color:#f3f3f3}
.w-select[multiple]{height:auto}
.w-form-label{cursor:pointer;margin-bottom:0;font-weight:400;display:inline-block}
@font-face{font-family:Manrope;src:url(6a26a66c0461307a4feed4e8_Manrope-Bold.woff2)format("woff2"),url(6a26a66c0461307a4feed4e9_Manrope-Bold.woff)format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(6a26a66c0461307a4feed4eb_Manrope-Regular.woff2)format("woff2"),url(6a26a66c0461307a4feed4ed_Manrope-Regular.woff)format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(6a26a66c0461307a4feed4ea_Manrope-Medium.woff2)format("woff2"),url(6a26a66c0461307a4feed4ec_Manrope-Medium.woff)format("woff");font-weight:500;font-style:normal;font-display:swap}
:root{--color-scheme-1--background:var(--_primitives---colors--white);--_typography---font-styles--body:Manrope,Arial,sans-serif;--color-scheme-1--text:var(--c-black-100);--_typography---font-styles--heading:Manrope,Arial,sans-serif;--_primitives---colors--white:#fff;--_primitives---colors--neutral-darkest:black;--text-color--text-alternate\<deleted\|relume-variable-text-color-3\>:var(--base-color-neutral--white\<deleted\|relume-variable-color-neutral-2\>);--_primitives---opacity--transparent:transparent;--c-gray-300:#ddd;--c-gray-500:#b4b4b4;--c-black-100:#000;--_primitives---opacity--white-60:#fff9;--_ui-styles---stroke--border-width:1px;--color-scheme-1--border:var(--c-gray-300);--_ui-styles---radius--medium:0px;--color-scheme-1--foreground:var(--c-gray-100);--background-color--background-secondary\<deleted\|relume-variable-background-color-2\>:var(--base-color-neutral--neutral-lightest\<deleted\|relume-variable-color-neutral-3\>);--border-color--border-primary\<deleted\|relume-variable-border-color-1\>:var(--base-color-neutral--black\<deleted\|relume-variable-color-neutral-1\>);--_ui-styles---radius--small:0px;--_primitives---colors--neutral-lightest:#eee;--_ui-styles---radius--large:0px;--color-scheme-1--accent:var(--c-violet-700);--c-white-100:#fff;--c-violet-700:#5026a4;--c-gray-100:#f8f8f8;--c-violet-300:#6737c7;--c-gray-700:#424242;--_ui-styles---stroke--divider-width:1px;--_primitives---opacity--neutral-darkest-50:#00000080;--_primitives---opacity--neutral-darkest-30:#0000004d;--_primitives---opacity--neutral-darkest-5:#0000000d;--c-violet-200:#804de7;--_primitives---colors--neutral-lighter:#ccc;--_primitives---colors--neutral-light:#aaa;--_primitives---colors--neutral:#666;--_primitives---colors--neutral-dark:#444;--_primitives---colors--neutral-darker:#222;--_primitives---opacity--white-5:#ffffff0d;--_primitives---opacity--white-10:#ffffff1a;--_primitives---opacity--white-15:#ffffff26;--_primitives---opacity--white-20:#fff3;--_primitives---opacity--white-30:#ffffff4d;--_primitives---opacity--white-40:#fff6;--_primitives---opacity--white-50:#ffffff80;--_primitives---opacity--neutral-darkest-10:#0000001a;--_primitives---opacity--neutral-darkest-15:#00000026;--_primitives---opacity--neutral-darkest-20:#0003;--_primitives---opacity--neutral-darkest-40:#0006;--_primitives---opacity--neutral-darkest-60:#0009;--base-color-neutral--white\<deleted\|relume-variable-color-neutral-2\>:white;--base-color-neutral--neutral-lightest\<deleted\|relume-variable-color-neutral-3\>:#eee;--base-color-neutral--black\<deleted\|relume-variable-color-neutral-1\>:black}
.w-form-formradioinput--inputType-custom.w--redirected-focus{box-shadow:0 0 3px 1px #3898ec}
.w-form-formradioinput--inputType-custom.w--redirected-checked{border-width:4px;border-color:#3898ec}
:where(.section_contact){background-color:var(--color-scheme-1--background);font-family:var(--_typography---font-styles--body);color:var(--color-scheme-1--text);font-size:1rem;line-height:1.5}
:where(.section_contact) h1{font-family:var(--_typography---font-styles--heading);letter-spacing:-.15rem;margin-top:0;margin-bottom:0;font-size:5rem;font-weight:500;line-height:103%}
:where(.section_contact) h2{font-family:var(--_typography---font-styles--heading);letter-spacing:-.0975rem;margin-top:0;margin-bottom:0;font-size:3.25rem;font-weight:500;line-height:103%}
:where(.section_contact) h3{font-family:var(--_typography---font-styles--heading);letter-spacing:-.07875rem;margin-top:0;margin-bottom:0;font-size:2.625rem;font-weight:500;line-height:120%}
:where(.section_contact) h4{font-family:var(--_typography---font-styles--heading);letter-spacing:-.06rem;margin-top:0;margin-bottom:0;font-size:2rem;font-weight:500;line-height:120%}
:where(.section_contact) h5{font-family:var(--_typography---font-styles--heading);letter-spacing:-.045rem;margin-top:0;margin-bottom:0;font-size:1.5rem;font-weight:400;line-height:120%}
:where(.section_contact) h6{font-family:var(--_typography---font-styles--heading);margin-top:0;margin-bottom:0;font-size:1.25rem;font-weight:400;line-height:120%}
:where(.section_contact) p{margin-bottom:0}
:where(.section_contact) a{color:var(--color-scheme-1--text);text-decoration:underline}
:where(.section_contact) ul{margin-top:1rem;margin-bottom:1rem;padding-left:1.25rem}
:where(.section_contact) ol{margin-top:1rem;margin-bottom:1rem;padding-left:1.5rem}
:where(.section_contact) li{margin-top:.25rem;margin-bottom:.25rem;padding-left:.5rem}
:where(.section_contact) img{max-width:100%;display:inline-block}
:where(.section_contact) label{margin-bottom:.25rem;font-weight:500}
.container-large{width:100%;max-width:105rem;margin-left:auto;margin-right:auto}
.t-heading-5-rg.c-gray-700:where(.w-variant-0adec012-852d-ad7f-9811-98d6cba4392e){font-size:1rem;line-height:137%}
.form_checkbox-icon.w--redirected-checked{box-shadow:none;background-color:#000;background-size:16px 16px;border-width:1px;border-color:#000}
.form_checkbox-icon.w--redirected-focus{box-shadow:none;border-color:#000}
.t-heading-4-md{letter-spacing:-.06rem;font-size:2rem;font-weight:500;line-height:120%}
.t-heading-3-md{letter-spacing:-.07875rem;font-size:2.625rem;font-weight:500;line-height:120%}
.form_input{border-style:none none solid;border-width:.0625rem;border-color:var(--c-gray-300)var(--c-gray-300)var(--c-gray-500);background-color:var(--_primitives---colors--white);height:auto;min-height:2.75rem;color:var(--c-black-100);margin-bottom:0;padding:.5rem;font-size:1rem;line-height:1.6;transition:border-color .45s var(--ease)}
.form_input:hover{border-color:var(--c-black-100)}
.form_input:focus{border-color:var(--_primitives---colors--neutral-darkest)var(--_primitives---colors--neutral-darkest)var(--c-black-100)}
.form_input::placeholder{color:var(--c-gray-500)}
.form_input.is-text-area{width:100%;min-width:100%;max-width:100%;height:auto;min-height:6.875rem;max-height:10rem;padding-top:.75rem;padding-bottom:.75rem;overflow:auto}
.form_input.is-select-input{border-color:var(--c-gray-300);background-image:url(6a26a66c0461307a4feed4bc_chevron-down.svg);background-position:99%;background-repeat:no-repeat;background-size:auto;width:100%}
.form_input.is-select-input.is-alternate{background-image:url(6a26a66c0461307a4feed4bd_chevron-down-white.svg)}
.form_input.is-alternate{border-color:var(--_primitives---colors--white);background-color:var(--_primitives---opacity--transparent);color:var(--_primitives---colors--white)}
.form_input.is-alternate::placeholder{color:var(--_primitives---opacity--white-60)}
.form_input.is-select-input-pricing{border-color:var(--c-gray-300);background-image:none;background-repeat:repeat;background-size:auto;border-radius:.125rem;width:100%}
.form_input.is-select-input-pricing:hover{border-color:var(--c-black-100)}
.form_input.is-select-input-pricing.is-alternate{background-image:url(6a26a66c0461307a4feed4bd_chevron-down-white.svg)}
.form_radio-icon.w--redirected-checked{background-color:#fff;background-image:none;border-width:6px;border-color:#000}
.form_radio-icon.w--redirected-focus{box-shadow:none;border-color:#000;margin-top:0}
.padding-global{padding-left:1.25rem;padding-right:1.25rem}
.t-paragraph-1-rg{letter-spacing:-.03rem;font-size:1rem;font-weight:400;line-height:137%}
.t-paragraph-1-rg.c-gray-700.inline-p-0{margin-bottom:1.75rem}
.t-paragraph-1-rg.is-navbar-title,.t-paragraph-1-rg.is-navbar-title:where(.w-variant-44ed07bd-fc51-ad05-4085-8a82feec19e8),.t-paragraph-1-rg.is-navbar-title:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){transition:color .45s var(--ease)}
.t-paragraph-1-rg.is-text{z-index:2;opacity:0;pointer-events:none;position:relative}
.t-paragraph-1-rg.is-navbar-title,.t-paragraph-1-rg.is-navbar-title.white-82,.t-paragraph-1-rg.is-navbar-title,.t-paragraph-1-rg.is-navbar-title.white-82,.t-paragraph-1-rg.is-navbar-title,.t-paragraph-1-rg.is-navbar-title.white-82{transition:color .45s var(--ease)}
.t-paragraph-2-rg{letter-spacing:-.02625rem;font-size:.875rem;font-weight:400;line-height:120%}
.t-paragraph-2-rg.is-radio-label{margin-bottom:0;margin-left:0;padding-left:0}
.t-paragraph-2-rg.no-wrap{white-space:nowrap}
.t-paragraph-2-rg.is-link{text-underline-offset:.1rem;text-decoration:underline;text-decoration-thickness:.0625rem;transition:opacity .45s var(--ease)}
.t-paragraph-2-rg.is-link:hover{opacity:.5}
.t-paragraph-2-rg.is-comment{font-size:.75rem}
.t-paragraph-2-rg.c-gray-62.inline-p-1{margin-top:1.5rem}
.t-paragraph-2-rg.c-gray-62.inline-p-0{margin-top:1.75rem}
.btn{grid-column-gap:.25rem;grid-row-gap:.25rem;color:var(--c-black-100);cursor:pointer;border-style:none;border-radius:6.1875rem;justify-content:center;align-items:center;padding:.0625rem;text-decoration:none;display:inline-flex}
.btn.is-primary{background-color:var(--c-violet-700);color:var(--c-white-100)}
.btn.is-default{z-index:1;grid-column-gap:.5rem;grid-row-gap:.5rem;background-color:var(--c-gray-100);transition:transform .45s var(--ease), background-color .45s var(--ease);position:relative;overflow:hidden}
.btn.is-default:where(.w-variant-1aa1281e-154b-92d7-1b06-d337d628eb95){-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);color:var(--c-white-100);background-color:#fff6;border:.0625rem solid #ffffff4d;padding:0}
.btn.is-default:where(.w-variant-a7881a4d-75de-5814-dcda-1b0863c16064){-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);color:var(--c-white-100);background-color:#fff9;border:.0625rem solid #fffc;padding:0}
.btn.is-default:hover:where(.w-variant-1aa1281e-154b-92d7-1b06-d337d628eb95){background-color:#fff9}
.btn.is-default:hover:where(.w-variant-a7881a4d-75de-5814-dcda-1b0863c16064){background-color:#ffffffbf}
.btn.is-default.is-navbar{background-color:var(--c-gray-300)}
.btn.is-default.is-navbar:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){-webkit-backdrop-filter:blur(.3125rem);backdrop-filter:blur(.3125rem);color:var(--c-white-100);background-color:#fff6;border:.0625rem solid #ffffff4d;padding:0}
.btn.is-default.is-navbar:hover:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){background-color:#fff9}
.btn.is-default.is-navbar.is-cs{pointer-events:none}
.btn.is-default.is-navbar-primary:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){border:.0625rem solid #fff6;padding:0}
.btn.is-default.is-tertiary{background-color:var(--c-gray-300);margin-left:0;margin-right:0}
.btn.is-default.is-tertiary:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){-webkit-backdrop-filter:blur(.3125rem);backdrop-filter:blur(.3125rem);color:var(--c-white-100);background-color:#fff6;border:.0625rem solid #ffffff4d;padding:0}
.btn.is-default.is-tertiary:hover:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){background-color:#fff9}
.btn.is-default.is-tertiary.is-cs{pointer-events:none}
.btn.is-bordered{border:.0625rem solid var(--c-gray-300)}
.btn_icon{border-radius:6.1875rem;flex-shrink:0;justify-content:center;align-items:center;width:1.3125rem;height:1.3125rem;transition:background-color .45s var(--ease);display:flex;overflow:hidden}
.btn_icon.is-violet{background-color:var(--c-violet-300);color:var(--c-white-100)}
.btn_icon.is-gray{background-color:var(--c-gray-300);width:1.5rem;height:1.5rem;color:var(--c-black-100);transition:transform .45s var(--ease)}
.btn_icon.is-gray:where(.w-variant-5e0ec0ff-49c5-1981-6517-216b7daf5b7d){background-color:var(--c-violet-300);color:var(--c-white-100)}
.btn_icon.is-gray:where(.w-variant-1aa1281e-154b-92d7-1b06-d337d628eb95),.btn_icon.is-gray:where(.w-variant-a7881a4d-75de-5814-dcda-1b0863c16064){color:var(--c-white-100);background-color:#ffffff4d}
.btn_icon.is-gray.is-primary-navbar{background-color:var(--c-violet-300);width:1.5rem;height:1.5rem;color:var(--c-white-100)}
.btn_icon.is-gray.is-primary-navbar:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){background-color:#ffffff80}
.btn_icon.is-gray.is-navbar:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){color:var(--c-white-100);background-color:#ffffff4d}
.btn_icon.is-gray-btn{border:.0625rem solid var(--c-gray-300);background-color:var(--c-gray-100);width:1.75rem;height:1.75rem;color:var(--c-black-100)}
.btn_icon.is-gray-btn:where(.w-variant-5e0ec0ff-49c5-1981-6517-216b7daf5b7d){background-color:var(--c-violet-300);color:var(--c-white-100)}
.btn_icon.is-blog{border:.0625rem solid var(--c-gray-300);background-color:var(--c-gray-100);width:1.75rem;height:1.75rem;color:var(--c-black-100)}
.btn_icon.is-blog:where(.w-variant-5e0ec0ff-49c5-1981-6517-216b7daf5b7d){background-color:var(--c-violet-300);color:var(--c-white-100)}
.btn_icon.is-gray{transition:transform .45s var(--ease)}
.btn_icon.is-career{border:.0625rem solid var(--c-gray-300);background-color:var(--c-gray-100);width:1.75rem;min-width:1.75rem;max-width:100%;height:1.75rem;color:var(--c-black-100);justify-content:flex-start;align-items:center;padding-left:.5625rem;position:absolute;inset:0% auto 0% 0%}
.btn_icon.is-career:where(.w-variant-5e0ec0ff-49c5-1981-6517-216b7daf5b7d){background-color:var(--c-violet-300);color:var(--c-white-100)}
.btn_icon.is-gray.primary-15{color:#fff;background-color:#6737c7}
.btn_icon.is-gray{color:#000;background-color:#ddd;width:1.5rem;height:1.5rem;transition:transform .45s var(--ease)}
.btn_icon.is-gray.primary-21{color:#fff;background-color:#6737c7}
.btn_icon.is-gray.is-navbar{width:1.5rem;height:1.5rem}
.btn_icon.is-gray.is-primary-navbar{color:#fff;background-color:#6737c7;width:1.5rem;height:1.5rem}
.btn_icon.is-gray-violet{background-color:var(--c-gray-300);width:1.5rem;height:1.5rem;color:var(--c-black-100);transition:transform .45s var(--ease)}
.btn_icon.is-gray-violet:where(.w-variant-5e0ec0ff-49c5-1981-6517-216b7daf5b7d){background-color:var(--c-violet-300);color:var(--c-white-100)}
.btn_icon.is-gray-violet:where(.w-variant-1aa1281e-154b-92d7-1b06-d337d628eb95),.btn_icon.is-gray-violet:where(.w-variant-a7881a4d-75de-5814-dcda-1b0863c16064){color:var(--c-white-100);background-color:#ffffff4d}
.btn_icon.is-gray-violet.is-primary-navbar{background-color:var(--c-violet-300);width:1.5rem;height:1.5rem;color:var(--c-white-100)}
.btn_icon.is-gray-violet.is-primary-navbar:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){background-color:#ffffff80}
.btn_icon.is-gray-violet.is-navbar{width:1.5rem;height:1.5rem}
.btn_icon.is-gray-violet.is-navbar:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){color:var(--c-white-100);background-color:#ffffff4d}
.c-gray-700{color:var(--c-gray-700)}
.c-gray-500{color:var(--c-gray-500)}
.btn_wrapper{grid-column-gap:.5rem;grid-row-gap:.5rem;background-color:var(--c-gray-100);border-radius:56px;justify-content:space-between;align-items:center;padding:.375rem .375rem .375rem 1rem;display:flex;overflow:hidden}
.btn_wrapper:where(.w-variant-5e0ec0ff-49c5-1981-6517-216b7daf5b7d){background-color:var(--c-violet-700);color:var(--c-white-100)}
.btn_wrapper:where(.w-variant-1aa1281e-154b-92d7-1b06-d337d628eb95),.btn_wrapper:where(.w-variant-a7881a4d-75de-5814-dcda-1b0863c16064){background-color:#0000}
.btn_wrapper.is-navbar-primary{background-color:var(--c-violet-700);color:var(--c-white-100);padding:.375rem .375rem .375rem 1rem;transition:background-color .45s var(--ease)}
.btn_wrapper.is-navbar-primary:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){-webkit-backdrop-filter:blur(.3125rem);backdrop-filter:blur(.3125rem);background-color:#0000}
.btn_wrapper.is-navbar-default{grid-column-gap:.5rem;grid-row-gap:.5rem;padding:.375rem .375rem .375rem 1rem}
.btn_wrapper.is-navbar-default:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){background-color:#0000}
.icon-embed-8{width:.5rem;height:.5rem;transition:transform .6s var(--ease);display:flex}
.navbar_blog-item-violet.is-gray{color:var(--c-black-100);background-image:url(6a2993680f2f026d689bfce9_navbar-img-01.jpg);justify-content:flex-end;padding-bottom:.75rem}
.max-width-350{max-width:21.875rem}
.fs-checkbox_button-10.w--redirected-checked{background-color:#501aff}
.max-width-550.t-paragraph-1-rg{display:block}
.t-label-2-md{letter-spacing:.04em;text-transform:uppercase;font-size:.625rem;font-weight:500;line-height:137%}
.t-label-2-md.is-disabled-50{opacity:.5}
.t-label-2-md.is-link{transition:opacity .45s var(--ease)}
.t-label-2-md.is-link:hover{opacity:.5}
.t-label-2-md.is-disabled-70{opacity:.7}
.t-label-2-md.c-gray-500.is-media-fallback{display:none}
.t-label-2-md.c-gray-500.fw-card-num{color:var(--c-violet-300);font-weight:700}
.t-label-2-md.is-label{padding-top:.125rem}
.t-label-2-md.is-link-underline{text-decoration:underline;transition:opacity .45s var(--ease)}
.t-label-2-md.is-link-underline:hover{opacity:.5}
.filter_radio.w--redirected-checked{border:1px solid var(--c-gray-700);pointer-events:none;background-image:url(6a3d69b2292dfdf53c49ff1f_icon.svg);background-position:.0625rem .0625rem;background-repeat:no-repeat;background-size:.5rem .5rem}
.filter_radio-round.w--redirected-checked{border:1px solid var(--c-gray-700);pointer-events:none;background-image:url(6a3d69b2292dfdf53c49ff1f_icon.svg);background-position:.0625rem .0625rem;background-repeat:no-repeat;background-size:.5rem .5rem}
.btn-2.is-default{z-index:1;background-color:#f8f8f8;transition:transform .45s var(--ease), background-color .45s var(--ease);position:relative;overflow:hidden}
.btn-2.is-default{z-index:1;grid-column-gap:.5rem;grid-row-gap:.5rem;background-color:#f8f8f8;transition:transform .45s var(--ease), background-color .45s var(--ease);position:relative;overflow:hidden}
.btn-2.is-default.is-navbar{background-color:#ddd}
.section_contact{z-index:2;background-color:var(--c-white-100);position:relative}
.contact_wrapper{grid-column-gap:1rem;grid-row-gap:1rem;grid-template-rows:auto;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-auto-columns:1fr;padding-top:4rem;padding-bottom:7.5rem;display:grid}
.contact_left-part{grid-column-gap:7.5rem;grid-row-gap:7.5rem;flex-flow:column;justify-content:space-between;align-items:flex-start;display:flex}
.contact_heading-part{grid-column-gap:1rem;grid-row-gap:1rem;flex-flow:column;display:flex}
.contact_bottom-part{grid-column-gap:1rem;grid-row-gap:1rem;flex-flow:column;grid-template-rows:auto auto;grid-template-columns:1fr 1fr;grid-auto-columns:1fr;justify-content:flex-end;width:100%;display:flex}
.contact_list{margin-top:0;margin-bottom:0;padding-left:0}
.contact_info-el{grid-column-gap:.75rem;grid-row-gap:.75rem;justify-content:flex-start;align-items:center;padding-left:0;display:flex}
.contact_blok{min-height:23.125rem;margin-bottom:0}
.icon-bg.icon-embed-8{will-change:transform;background-image:url(6a453615b0ce289ef04e88ea_plus-icon-black.svg);background-position:50%;background-size:auto;display:block;position:absolute}
.contact_default{grid-column-gap:1rem;grid-row-gap:1rem;flex-flow:column;width:100%;max-width:100%;display:flex}
.btn-form_wrapper{grid-column-gap:1rem;grid-row-gap:1rem;flex-flow:wrap;justify-content:space-between;display:flex}
.contact_form-col{grid-column-gap:1rem;grid-row-gap:1rem;grid-template-rows:auto;grid-template-columns:1fr 1fr;grid-auto-columns:1fr;display:grid}
.contact_notes{grid-column-gap:.5rem;grid-row-gap:.5rem;justify-content:flex-start;align-items:center;display:flex}
.contact_success{border-top:.0625rem solid var(--c-gray-300);border-bottom:.0625rem solid var(--c-gray-300);background-color:var(--c-white-100);width:100%;padding:3rem 1.5rem}
.contact_success-wrapper{grid-column-gap:1rem;grid-row-gap:1rem;flex-flow:column;display:flex}
.contact_form-error{color:#a00303;margin-top:1.5rem;padding:1rem}
.navbar_blog-item-violet-2.is-gray{color:#000;background-image:url(6a2993680f2f026d689bfce9_navbar-img-01.jpg);justify-content:flex-end;padding-bottom:.75rem}
.btn_wrapper-3.is-navbar-primary{color:#fff;background-color:#5026a4;padding:.375rem .375rem .375rem 1rem;transition:background-color .45s var(--ease)}
.upl-section.is-gray{background-color:#f8f8f8}
@media screen and (min-width:1280px){.t-paragraph-2-rg.is-comment{font-size:.875rem}}
@media screen and (max-width:991px){.t-heading-4-md{font-size:1.75rem}.t-heading-3-md{font-size:2.25rem}.t-paragraph-1-rg.is-navbar-title:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){color:var(--c-white-100)}.t-paragraph-1-rg.is-navbar-title{font-size:1.25rem;line-height:120%}.btn.is-default.is-navbar{background-color:var(--c-gray-300)}.btn.is-default.is-navbar:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){background-color:#ffffff1a}.btn.is-default.is-tertiary{background-color:var(--c-gray-300)}.btn.is-default.is-tertiary:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){background-color:#ffffff1a}.btn_icon.is-gray.is-primary-navbar,.btn_icon.is-gray.is-navbar,.btn_icon.is-gray.is-navbar,.btn_icon.is-gray.is-primary-navbar,.btn_icon.is-gray.is-navbar,.btn_icon.is-gray.is-primary-navbar,.btn_icon.is-gray.is-navbar,.btn_icon.is-gray.is-primary-navbar,.btn_icon.is-gray-violet.is-primary-navbar,.btn_icon.is-gray-violet.is-navbar{width:2.25rem;height:2.25rem}.btn_wrapper:where(.w-variant-1aa1281e-154b-92d7-1b06-d337d628eb95){white-space:nowrap}.btn_wrapper.is-navbar-primary,.btn_wrapper.is-navbar-default{justify-content:space-between;width:100%;padding-left:1rem;padding-right:.25rem}.btn-2.is-default.is-navbar{background-color:#ddd}.section_contact{z-index:2;background-color:var(--c-white-100);position:relative}.contact_wrapper{grid-column-gap:3rem;grid-row-gap:3rem;grid-template-rows:auto;grid-template-columns:5fr;grid-auto-columns:1fr;display:grid}.btn_wrapper-3.is-navbar-primary{justify-content:space-between;width:100%;padding-left:1rem;padding-right:.25rem}}
@media screen and (max-width:767px){:where(.section_contact) h1{letter-spacing:-.105rem;font-size:3rem;font-weight:500;line-height:102%}:where(.section_contact) h2{letter-spacing:-.0675rem;font-size:2.25rem}:where(.section_contact) h3{letter-spacing:-.0525rem;font-size:1.75rem}:where(.section_contact) h4{letter-spacing:-.045rem;font-size:1.5rem;line-height:120%}:where(.section_contact) h5{letter-spacing:-.0375rem;font-size:1.25rem}:where(.section_contact) h6{font-size:1.125rem}.t-heading-5-rg.c-gray-700:where(.w-variant-0adec012-852d-ad7f-9811-98d6cba4392e){font-size:.875rem}.t-heading-4-md{letter-spacing:-.045rem;font-size:1.5rem;line-height:120%}.t-heading-3-md{letter-spacing:-.0525rem;font-size:1.75rem}.padding-global{padding-left:1rem;padding-right:1rem}.t-paragraph-1-rg{letter-spacing:-.02625rem;font-size:.875rem}.t-paragraph-1-rg.is-announcment-bar{font-size:.75rem}.t-paragraph-2-rg{letter-spacing:-.02rem;font-size:.75rem}.btn.is-default.is-navbar:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c),.btn.is-default.is-tertiary:where(.w-variant-088cdd74-0145-e755-a06b-a5e76407359c){background-color:#ffffff1a}.t-label-2-md.c-gray-500.is-media-fallback{display:block}}
@media screen and (max-width:479px){.t-heading-5-rg.c-gray-700:where(.w-variant-0adec012-852d-ad7f-9811-98d6cba4392e){max-width:17rem}.form_input.is-text-area{min-height:8rem}.t-paragraph-2-rg.is-box{font-size:.625rem}.contact_form-col{display:flex}}

/* Not yet in the published CSS: chips (Designer values) and the primary button (Global Styles embed). */
.contact_chip{position:relative;display:inline-flex;height:36px;margin-bottom:0;padding:0 16px;justify-content:center;align-items:center;border-radius:99px;background-color:#f8f8f8;color:#000;font-size:.97rem;line-height:1.2;letter-spacing:-.019em;white-space:nowrap;cursor:pointer;transition:background-color .45s var(--ease), color .45s var(--ease)}
.contact_chip:hover{background-color:#ededed}
.contact_chip:has(.contact_chip-input:checked){background-color:#000;color:#fff}
.contact_chip:has(.contact_chip-input:focus-visible){outline:2px solid #7a7bdc;outline-offset:2px}
.contact_chip-input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.contact_chip-label{margin-bottom:0;font-weight:400;cursor:pointer}
.contact_interests{display:flex;padding:.5rem 0;flex-direction:column;row-gap:.75rem}
.contact_interests-list{display:flex;flex-wrap:wrap;gap:8px}
.btn[data-wf--btn--variant="primary"]{background:radial-gradient(104.63% 141.12% at 51.02% 67.74%,#7a7bdc 0%,#3a167b 73.08%)}
@media screen and (min-width:992px){
.btn[data-wf--btn--variant="primary"]:hover .btn_wrapper{background-color:var(--c-violet-300)}
.btn[data-wf--btn--variant="primary"]:hover .btn_icon{background-color:var(--c-violet-200)}
.btn:hover .btn_icon .icon-embed-8{transform:rotate(360deg)}
}

/* This page: the section closes the page, no motion glow inside it, one chevron on the select. */
#contact.wf-contact-anchor > .motion-horizon{display:none}
.section_contact select.form_input{-webkit-appearance:none;appearance:none}

/* ============================================================================
   brand-type.css — type system matched to memories.ai/upload-app
   (upload-intro-v5.css). Font stack, base and display ladder only; this layer
   sets nothing but font-family / font-size / font-weight / line-height /
   letter-spacing, and sits last so it wins over the earlier size rules.
   ============================================================================ */
:root {
  --font-sans: Manrope, 'PingFang SC', system-ui, sans-serif;
  --font-ios: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* The reference scale, verbatim. */
  --t-intro: clamp(3rem, 1.4rem + 6.4vw, 8rem);
  --t-hero: clamp(2.6rem, 1.7rem + 3.4vw, 4.6rem);
  --t-figure: clamp(3.6rem, 3.1rem + 1.8vw, 5rem);
  --t-statement: clamp(2rem, 1.3rem + 3vw, 4rem);
  --t-h2: clamp(1.9rem, 1.5rem + 1.7vw, 3rem);
  --t-card: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
  --t-title: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
  --t-h3: clamp(1.3rem, 1.2rem + 0.4vw, 1.6rem);
  --t-lead: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
}

html body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
html button, html input, html textarea, html select { font-family: inherit; }

/* Headings: the reference's weight and tracking, not the old 400 / -.052em. */
html h1, html h2, html h3 { font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; }

/* --- Display ----------------------------------------------------------- */
html .hero h1 { font-size: var(--t-hero); line-height: 1.04; letter-spacing: -0.04em; }
html .hero-content > p { font-size: var(--t-lead); line-height: 1.55; }

/* Section statements all sit on one step. */
/* The page's two true statements keep the statement step. */
html .quality-statement,
html .pin-reveal__text {
  font-size: var(--t-statement);
  line-height: 1.06;
  letter-spacing: -0.04em;
}
/* Every section head sits on the reference's h2 step. */
html .network-copy h2,
html .diversity-heading h2,
html .skill-tail__head h2,
html .mu-hardware .hw-intro h2,
html .mu-hardware.is-scrolly .hw-intro h2,
html .mu-hardware .dt-intro h2,
html .app-intro h2,
html .hw-app__copy h2,
html .contact-row h2,
html .mu-contact h2 {
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
/* Room for "capture real-world tasks." to stay on the second line. */
html .network-copy { max-width: 690px; }

/* The big figures read as the reference's large numerals. */
html .network-stats strong { font-size: var(--t-figure); line-height: 1; letter-spacing: -0.04em; }

/* --- Sub-heads ---------------------------------------------------------- */
html .mu-hardware .mx-text h3,
html .mu-hardware.is-scrolly .mx-text h3,
html .lab-package__copy h3,
html #contact-dialog h2,
html .form-success h3,
html .mu-contact__success h3,
html .skill-tail__task {
  font-size: var(--t-card);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
html .mu-hardware .dt-panel h3,
html .scene-dialog-caption h2,
html .delivery-sheet strong {
  font-size: var(--t-title);
  line-height: 1.2;
  letter-spacing: -0.025em;
}
html .pipeline-tabs > button strong,
html .pipeline-scene .pipeline-tabs > button strong {
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* --- Leads -------------------------------------------------------------- */
html .network-copy p,
html .skill-tail__head p,
html .mu-hardware .hw-intro > p:last-child,
html .mu-hardware .dt-lead,
html .mu-contact__intro,
html .hw-app__copy p,
html .lab-package__copy > p {
  font-size: var(--t-lead);
  line-height: 1.55;
}

/* --- Product mock-ups keep their own dense type, as on the reference page. */
html .ux3, html .ux3 * { font-family: var(--font-ios); }

/* The pipeline column is narrow, so its statement sits a step down. */
html .pipeline-scene > .quality-statement { font-size: var(--t-card); line-height: 1.12; letter-spacing: -0.035em; }

/* Webflow's own badge is injected into the body at runtime; this page does not carry it. */
.w-webflow-badge { display: none !important; }

/* Pin reveal: the statement goes black -> white as the sunrise climbs through it. The solid face is
   pure white and is wiped in from the bottom in step with the glow (--pr-wipe, set by pin-reveal.js),
   so the line the glow is passing reads exactly white. */
html .pin-reveal__text.is-solid {
  color: #fff;
  opacity: var(--pr-copy, 1);
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--pr-wipe, 0) * 150% - 30%), transparent calc(var(--pr-wipe, 0) * 150%));
          mask-image: linear-gradient(to top, #000 calc(var(--pr-wipe, 0) * 150% - 30%), transparent calc(var(--pr-wipe, 0) * 150%));
}
@media (prefers-reduced-motion: reduce) {
  html .pin-reveal__text.is-solid { -webkit-mask-image: none; mask-image: none; }
}

/* ============================================================================
   Hero ribbon, restated: one dark viewfinder at rest, frames waking outward,
   plain outlines on the photographs, and a single shared exit.
   ============================================================================ */

/* No warm wash inside the frames and no travelling tint on their outlines —
   one neutral stroke for all of them, whatever the ambient wave is doing. */
.memory-sheet { fill: none; }
.hero .memory-sheet,
.hero[data-ribbon-motion] .memory-sheet { stroke: #6e6862; stroke-width: .85px; }

/* The capture frame reads as a dark viewfinder, not an orange one. */
.hero .memory-frame--focus .memory-sheet,
.hero[data-ribbon-motion] .memory-frame--focus .memory-sheet { stroke: #5c5751; stroke-width: 1px; }
.hero .capture-corners { stroke: #5c5751; stroke-width: .9px; opacity: .95; }
.hero .capture-point { fill: #8d8781; }

/* At rest only the capture frame is lit (--wake is 0 on every other frame until
   intro.js wakes it); a frame that has its memory keeps its full presence. */
.hero-runway.is-scrolly .memory-frame {
  opacity: calc(
    var(--wake, 1) *
    (var(--frame-motion-opacity, var(--frame-opacity)) +
     var(--fill, 0) * (1 - var(--frame-motion-opacity, var(--frame-opacity))))
  );
}
.hero-runway.is-scrolly .memory-frame--focus { opacity: 1; }

/* Once a frame carries its memory the outline steps out of the picture's way. */
.hero-runway.is-scrolly .memory-sheet { stroke-opacity: calc(1 - var(--fill, 0) * .88); }

@media (prefers-reduced-motion: reduce) {
  .hero-runway .memory-frame { opacity: var(--frame-opacity); }
  .hero-runway .memory-frame--focus { opacity: 1; }
}

/* The network figures lead, each with its label set under it. */
html .network-stats > div { display: flex; flex-direction: column; align-items: flex-start; }
html .network-stats strong { margin-top: 0; }
html .network-stats > div > span { margin-top: 14px; }

/* ============================================================================
   Hero, restated as a capture matrix: the frames fill the screen as a grid,
   waking outward from the one capture frame, with the copy laid over them.
   This supersedes the SVG ribbon rules above.
   ============================================================================ */
html .hero-visual {
  position: absolute; inset: 0; width: auto; height: auto; z-index: 0;
  transform: none; -webkit-mask-image: none; mask-image: none;
}
html .hero .memory-ribbon {
  position: absolute; inset: 0; left: 0; bottom: auto;
  width: 100%; height: 100%; max-width: none; max-height: none;
  display: grid;
  grid-template-columns: repeat(var(--cols, 10), 1fr);
  grid-template-rows: repeat(var(--rows, 6), 1fr);
  gap: clamp(3px, .45vw, 7px);
  padding: clamp(3px, .45vw, 7px);
  transform: translateY(var(--ir-rise, 0px)) scale(var(--ir-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}
html .memory-frame {
  position: relative; display: block; overflow: hidden;
  border-radius: 3px; background: #0d0b0a;
  transform: translate(var(--frame-motion-x, 0px), var(--frame-motion-y, 0px));
}
html .frame-lift {
  position: absolute; inset: 0; display: block;
  transform-box: content-box; transform-origin: 50% 50%;
  transform: translateY(var(--lift-y, 0px)) scale(var(--lift-s, 1));
  opacity: var(--lift-o, 1);
}
html .memory-shot {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: calc(var(--fill, 0) * .95);
  filter: saturate(.86) brightness(.92);
}
/* The old ribbon centred itself with translateX(-50%); the grid is full-bleed instead.
   This selector has to out-rank .hero-runway.is-scrolly .hero .memory-ribbon. */
html .hero-runway.is-scrolly .hero .memory-ribbon {
  left: 0; right: 0; transform-origin: 50% 50%;
  transform: translateY(var(--ir-rise, 0px)) scale(var(--ir-scale, 1));
}
/* At rest only the capture frame is lit; --wake brings the rest in, outward, and the whole
   tile (box included) leaves with --lift-o so no empty cells are left behind. */
html .hero-runway.is-scrolly .memory-frame {
  opacity: calc(var(--wake, 1) * (.26 + var(--fill, 0) * .74) * var(--lift-o, 1));
}
html .hero-runway.is-scrolly .memory-frame--focus { opacity: var(--lift-o, 1); }
html .memory-frame--focus { outline: 1px solid #5c5751; outline-offset: -1px; }

/* The viewfinder marks sit on the capture frame and fade once it carries its memory. */
html .capture-mark {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: none; opacity: calc(1 - var(--fill, 0) * .8); pointer-events: none;
}
html .capture-mark .capture-corners { stroke: #6e6862; stroke-width: 2.2; fill: none; }
html .capture-mark .capture-point { fill: #8d8781; stroke: none; }

/* Second beat: the capture copy, laid over the matrix on its own soft scrim. */
html .hero-collect {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: min(44rem, calc(100% - var(--page) * 2));
  transform: translate(-50%, calc(-50% + var(--collect-y, 26px)));
  text-align: center; pointer-events: none;
  opacity: var(--collect-o, 0);
}
html .hero-collect::before {
  content: ''; position: absolute; z-index: -1; inset: -90% -34%;
  background: radial-gradient(ellipse at center, #050505f2 0%, #050505e6 46%, #05050500 76%);
}
html .hero-collect__eyebrow {
  display: block; font-size: .82rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
html .hero-collect__title {
  margin: 14px 0 0; font-size: var(--t-h2); font-weight: 500;
  line-height: 1.05; letter-spacing: -.035em; color: #f6f5f2;
}
html .hero-collect__lead {
  margin: 18px auto 0; max-width: 34ch;
  font-size: var(--t-lead); line-height: 1.55; color: #cfc9c1;
}
html .hero-collect__note {
  margin: 26px auto 0; max-width: 40ch;
  font-size: .92rem; line-height: 1.6; color: #a9a29a;
}
@media (max-width: 760px) {
  html .hero .memory-ribbon { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(12, 1fr); }
  html .hero-collect__lead { max-width: 28ch; }
}
@media (prefers-reduced-motion: reduce) {
  html .hero-runway .memory-frame { opacity: .5; }
  html .memory-shot { opacity: .9; }
  html .hero-collect { opacity: 1; transform: translate(-50%, -50%); }
}

/* ============================================================================
   Hero, split layout: copy holds the left column, the matrix fills the right.
   One capture marker replaces the per-tile viewfinder — every stroke is 1px,
   every corner is rounded, and it follows the pointer.
   ============================================================================ */
html .hero .memory-ribbon,
html .hero-runway.is-scrolly .hero .memory-ribbon { left: 40%; right: 0; }

html .hero-collect {
  left: var(--page); right: auto; top: 50%;
  width: min(27rem, 34%);
  transform: translate(0, calc(-50% + var(--collect-y, 26px)));
  text-align: left;
}
html .hero-collect::before {
  inset: -40% -26% -40% -140%;
  background: linear-gradient(90deg, #050505 58%, #05050500 100%);
}
html .hero-collect__lead,
html .hero-collect__note { margin-left: 0; margin-right: 0; max-width: none; }

/* The marker: one 1px outline, four 1px corner ticks, one dot. */
html .memory-frame--focus { outline: none; }
html .capture-marker {
  /* A grid item, so it sits exactly on a cell at any size without being measured. */
  grid-column: calc(var(--mc, 5) + 1); grid-row: calc(var(--mr, 5) + 1);
  position: relative; z-index: 3;
  border: 1px solid #7b756e;
  border-radius: 6px;
  pointer-events: none;
}
html .capture-marker i { position: absolute; width: 12px; height: 12px; border: 0 solid #ffffff; }
html .capture-marker i:nth-of-type(1) { left: 5px; top: 5px; border-top-width: 1px; border-left-width: 1px; border-top-left-radius: 3px; }
html .capture-marker i:nth-of-type(2) { right: 5px; top: 5px; border-top-width: 1px; border-right-width: 1px; border-top-right-radius: 3px; }
html .capture-marker i:nth-of-type(3) { right: 5px; bottom: 5px; border-bottom-width: 1px; border-right-width: 1px; border-bottom-right-radius: 3px; }
html .capture-marker i:nth-of-type(4) { left: 5px; bottom: 5px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-left-radius: 3px; }
html .capture-marker b {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #ffffff;
}

/* A frame under the marker shows itself even before the matrix has woken. */
html .memory-frame.is-hover .memory-shot { opacity: calc(max(var(--fill, 0), .6) * .95); }
html .hero-runway.is-scrolly .memory-frame.is-hover { opacity: var(--lift-o, 1); }

@media (max-width: 900px) {
  html .hero .memory-ribbon,
  html .hero-runway.is-scrolly .hero .memory-ribbon { left: 0; }
  html .hero-collect {
    left: 50%; width: min(32rem, calc(100% - var(--page) * 2));
    transform: translate(-50%, calc(-50% + var(--collect-y, 26px)));
    text-align: center;
  }
  html .hero-collect::before {
    inset: -70% -30%;
    background: radial-gradient(ellipse at center, #050505f2 0%, #050505e6 46%, #05050500 76%);
  }
}

/* ============================================================================
   Hero matrix v2: denser grid (sharper frames at their native size), one
   viewfinder free of the grid, and a single fade for the whole block.
   ============================================================================ */
html .memory-shot {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: calc(var(--fill, 0) * .95);
  filter: saturate(.92) brightness(.96);
}
/* The block leaves as one slow fade; tiles no longer collapse individually. */
html .hero-runway.is-scrolly .hero .memory-ribbon {
  opacity: calc(1 - var(--matrix-out, 0));
}
html .hero-runway.is-scrolly .memory-frame {
  opacity: calc(var(--wake, 1) * (.26 + var(--fill, 0) * .74));
}

/* The viewfinder: a frame and nothing else, anywhere the pointer goes. */
html .capture-marker {
  position: absolute; z-index: 1; left: 0; top: 0;
  --cm-base: clamp(96px, 9vw, 140px);
  width: var(--cm-w, var(--cm-base));
  height: var(--cm-h, calc(var(--cm-base) * .75));
  grid-column: auto; grid-row: auto;
  /* Reads on an unlit cell and on a bright frame alike. */
  border-color: #efe9e1;
  box-shadow: 0 0 0 1px #0000005c, inset 0 0 0 1px #0000003d;
  transform: translate(var(--cm-x, 0px), var(--cm-y, 0px));
  /* It leaves with the matrix rather than hanging over the next chapter. */
  opacity: calc(1 - var(--matrix-out, 0));
  transition: transform .35s var(--ease), width .35s var(--ease), height .35s var(--ease);
}
@media (prefers-reduced-motion: reduce) { html .capture-marker { transition: none; } }


/* ============================================================================
   Comment pass: copy, dividers and breathing room.
   ============================================================================ */

/* The pipeline detail keeps the authored line break after the semicolon. */
html #pipeline-detail p { white-space: pre-line; }

/* The clip package closes the chapter on its own, with no rule above its heading and none
   under it either. The margin keeps it clear of the pipeline above. */
html .lab-package {
  padding-top: 0; border-top: 0;
  padding-bottom: clamp(40px, 5vw, 72px); border-bottom: 0;
}

/* The matched clip reads as footage: a landscape 16:10 frame sitting at the top of its column,
   instead of one stretched square by the panel's height. */
html .delivery-sheet.dl-workspace > .dl-body { grid-template-columns: minmax(0, 1.22fr) minmax(0, .96fr); }
html .dl-result { grid-template-rows: auto 31px; align-content: start; }
html .dl-clip { aspect-ratio: 16 / 10; }
@media (max-width: 760px) {
  html .delivery-sheet.dl-workspace > .dl-body { grid-template-columns: minmax(0, 1fr); }
  html .dl-result { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
  html .dl-clip { aspect-ratio: auto; }
}

/* The pipeline statement starts a step lower, clear of the section rule. */
html .pipeline-scene > .quality-statement { margin-top: clamp(12px, 1.8vw, 30px); }

/* The app close keeps more floor under it before the panel edge. */
html .mu-hardware .hw-app { padding-bottom: clamp(72px, 8vw, 128px); }

/* The long tail reads against plain black: mu-motion.js drops a warm radial into #diversity, and
   over the chart's long runway it washes the whole section orange. The contact horizon stays. */
html #diversity > .motion-glow { display: none; }

/* mu-story.js appends a fixed down-arrow (.story-guide) that pops up at every chapter handoff.
   The page does not ask for a scroll prompt; display:none also takes it out of the tab order,
   which toggling opacity would not. */
html .story-guide { display: none !important; }

/* The clip package list: the rule closes each item instead of opening it, and the copy column is
   wide enough that every description holds one line. The id prefix outranks the #quality layer. */
html #quality .lab-package__list li { border-top: 0; border-bottom: 1px solid #1715131a; }

@media (min-width: 1024px) {
  html .lab-package { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
  html #quality .lab-package__list span { white-space: nowrap; }

  /* The stage description now sits under the heading, so column one reads heading / description /
     steps, with the footage still spanning the full height of column two. */
  html .pipeline-scene { grid-template-rows: auto auto minmax(0, 1fr); }
  html .pipeline-scene > .pipeline-footer { grid-column: 1; grid-row: 2; margin-top: 18px; }
  html .pipeline-scene .pipeline-visual { grid-row: 1 / 4; }
  html .pipeline-scene .pipeline-controls { grid-row: 3; margin-top: 36px; }
  html .pipeline-scene #pipeline-detail { max-width: 46ch; min-height: 0; }
}

/* The mount list sat with its dots hard on the grid line, so the rail competed with the heading's
   left edge. Indent the whole group — dots, rail and labels move together, since the rail is
   positioned against .mx-tabs. Only on the desktop rail; the narrow layout is a centred row. */
@media (min-width: 1024px) {
  /* Superseded below: the rail lines up with the heading and the whole block moves instead. */
  html .mu-hardware.is-scrolly .mx-tabs { margin-left: 0; }
}

/* ----------------------------------------------------------------------------
   Buttons carry the orange from the Upload wordmark: the dot inside the "U" is a
   single flat #fe7808 (sampled from the logo PNG), not the page's lighter #ff913d.
   Orange button = orange fill, white label.
   ---------------------------------------------------------------------------- */
:root { --btn-orange: #fe7808; --btn-orange-lit: #ff8c27; }

html .button-primary { background: var(--btn-orange); border-color: var(--btn-orange); color: #fff; }
html .button-primary:hover { background: var(--btn-orange-lit); border-color: var(--btn-orange-lit); box-shadow: 0 0 28px #fe780840; }



/* ----------------------------------------------------------------------------
   The pin statement breaks once, after "snaps".
   text-wrap:balance was the problem: with the forced break fixing line one at
   ~504px, Chrome balanced the REST into two even lines (517px + 230px) rather
   than leaving it on one. Widening alone could not beat that. Taking the wrap
   off entirely makes the <br> the only break; the line needs ~725px and the
   column gives 1056px at this breakpoint, so it holds.
   ---------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  html .pin-reveal__copy { width: min(66rem, 100%); }
  html .pin-reveal__text { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  html .pin-reveal__copy { width: min(58rem, 100%); }
  html .pin-reveal__text { text-wrap: wrap; }
}

/* ----------------------------------------------------------------------------
   The mount chapter's copy column: heading, lead and the rail all share one left
   edge (the rail's dots sit at the list's x=0, which is the heading's edge), and
   the whole column sits further in, closer to the Pin on the right. .hw-panel is
   display:contents here, so its children are the grid items that have to move.
   ---------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  html .mu-hardware.is-scrolly .hw-panel > * { margin-left: clamp(40px, 7vw, 150px); }
}

/* ============================================================================
   Pipeline console: two regressions from the inline #quality layer.

   1. It declares  --q-f: var(--q-f)  and  --q-s: var(--q-s)  — each variable set
      to itself. That is a cycle, so both are invalid at computed-value time and
      every one of the ten rules that used them fell back to the property's
      initial value: the step rule, the chips, the task bars, the Ref tag, the
      trim block and the cut swatch all lost their fill, and .vw-row's border
      resolved to currentColor. Giving them real values restores all ten.

   2. .st-d is a direct <span> child of the step button, so
      ".pipeline-tabs > button > span" (specificity 1,1,1 with the #quality id)
      out-ranked "#quality .st-d" (1,1,0) and styled the sentence like a step
      NUMBER: uppercase, .14em tracking, 600 weight. Match on specificity.

   The step rule is also back to orange, which is what was asked for.
   ============================================================================ */
html #quality { --q-f: #1715130f; --q-s: #c4bfb8; }

html #quality.is-scrubbed .pipeline-tabs > button::before { background: var(--q-t); }
html #quality.is-scrubbed .pipeline-tabs > button::after { background: var(--btn-orange); }

html #quality .pipeline-tabs > button > span.st-d {
  display: block;
  font-size: .9rem; font-weight: 400; line-height: 1.55;
  letter-spacing: -.01em; text-transform: none;
  color: var(--q-ink-2);
}
html #quality .pipeline-tabs > button > span.st-d::before { content: none; }